Neat Paraskavedekatriaphobia's Meaning

    ng-marquee
    TypeScript icon, indicating that this package has built-in type declarations

    9.5.0 • Public • Published

    ng-marquee

    Angular 6+ Component For Marquee Text

    Donate

    ( 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

    Any contributions are appreciated.

    paypal

    Inspired by https://github.com/muchweb/html5-marquee

    Install

    npm i ng-marquee

    DownloadsWeekly Downloads

    555

    Version

    9.5.0

    License

    MIT

    Unpacked Size

    85.7 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar