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

Dependencies (1)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i ng-marquee

    Weekly Downloads

    487

    Version

    9.5.0

    License

    MIT

    Unpacked Size

    85.7 kB

    Total Files

    23

    Last publish

    Collaborators

    • shivarajnaidu