1.0.11 • Published 4 years ago

@plcoder/ng-ticker v1.0.11

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

NG Ticker

Lightweight Ticker animation component

Show changing number with stock ticker like animation    

ng ticker in action

TOI

Demo

Try demo on Stackblitz!

Install

You can get it on NPM installing ng-ticker module as a project dependency.

npm install @plcoder/ng-ticker --save

Setup

You'll need to add TickerModule to your application module. So that, the <ticker> components will be accessible in your application.

...
import { TickerModule } from '@plcoder/ng-ticker';
...

@NgModule({
  declarations: [
    YourAppComponent
  ],
  imports: [
    ...
    TickerModule,
    ...
  ],
  providers: [],
  bootstrap: [YourAppComponent]
})

export class YourAppComponent {}

After that, you can use the ticker components in your templates, passing the configuration data into the component itself.

  • ticker: Handle the number change animation
<ticker [displayNum]="price" duration="300ms"></ticker>

API

@Inputs

Prop name and typeDescription
displayNum?: number Defaults to 0Number to display
duration?: string Defaults to 200msAnimation speed, time required to transiton from one value to other