NG Ticker

Lightweight Ticker animation component

Show changing number with stock ticker like animation    

TOI

• Demo
• Install
• Setup
• Development
• Contribute

Demo

Try demo on Stackblitz!

• Usage: animation duration, appearance

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 |