Skip to content

Latest commit

 

History

History
80 lines (51 loc) · 1.7 KB

README.md

File metadata and controls

80 lines (51 loc) · 1.7 KB

NG Ticker

Lightweight Ticker 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 type
Description
displayNum?: number
Defaults to 0
Number to display
duration?: string
Defaults to 200ms
Animation speed, time required to transiton from one value to other