ng-marquee
v9.5.0
Published
Angular 8+ CSS Marquee (Alternative To HTML Marquee Tag)
Downloads
2,310
Maintainers
Readme
ng-marquee
Angular 6+ Component For Marquee Text
( This Library Is Using Angular CLI's Library Generation Command )
How to:
Install npm
npm install ng-marquee --save
Demo
Simple Example
Import Module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgMarqueeModule } from 'ng-marquee';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgMarqueeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Use Component
<ng-marquee>
<mark>Hello, World.... Find Me @ <a href="https://www.linkedin.com/in/shivarajnaidu/" target="__blank"> https://www.linkedin.com/in/shivarajnaidu/ (Yuvaraj)</a></mark>
</ng-marquee>
API
input properties
@Input() speed
speed
property available for controlling speed of text movement
possible values
- drowsy
- slow
- normal
- fast
- swift
- hyper
Example
<ng-marquee speed="drowsy">
<mark>Hello, World.... Find Me @ <a href="https://www.linkedin.com/in/shivarajnaidu/" target="__blank"> https://www.linkedin.com/in/shivarajnaidu/ (Yuvaraj)</a></mark>
</ng-marquee>
For Custom Speed
@Input() duration: string
Example
<ng-marquee duration="90s">
<mark>Hello, World.... Find Me @ <a href="https://www.linkedin.com/in/shivarajnaidu/" target="__blank"> https://www.linkedin.com/in/shivarajnaidu/ (Yuvaraj)</a></mark>
</ng-marquee>
@Input() stopOnHover
stopOnHover
property is usefull to stop the content movement on hover
possible values
- true
- false
Example
<ng-marquee [stopOnHover]="true">
<mark>Hello, World.... Find Me @ <a href="https://www.linkedin.com/in/shivarajnaidu/" target="__blank">
https://www.linkedin.com/in/shivarajnaidu/ (Yuvaraj)</a></mark>
</ng-marquee>
@Input() direction
direction
property available for controlling direction of movement
possible values
- left
- right
- alternate
Example
<ng-marquee direction="right">
<mark>Hello, World.... Find Me @ <a href="https://www.linkedin.com/in/shivarajnaidu/" target="__blank"> https://www.linkedin.com/in/shivarajnaidu/ (Yuvaraj)</a></mark>
</ng-marquee>
To Build the component
ng build ng-marquee