ngx-countto

Angular 2+ component that counts up to a specified number. And accompanying service to trigger the action at a desired time or event. Supports multiple instances and different starting times.

Preview in Plunker

Installation

To install this library, run:

$ npm install ngx-countto --save

Usage

Add the component in your Angular application's template:

<!-- You can now use your library component in app.component.html -->
<h1>{{title}}</h1>
<ngx-countto [to]=100></ngx-countto>

And in your Angular AppModule, import the library then trigger the counting by calling CountToService's function start() anywhere from your application logic:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

// Import the library
import { CountToModule, CountToService } from 'ngx-countto';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule,
    // Specify the library as an import
    CountToModule
  ],
  providers: [ CountToService ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

@Component()
class AppComponent implements OnInit {
  // Inject the service into your component
  constructor(private counttoService: CountToService) {}
  ngOnInit() {
    // Start the counting via the service
    this.counttoService.start();
  }
}

Parameters

Parameter | Type | Default | Description --- | --- | --- | --- id | string | countto | Element ID of the component. For multi-component support from | number | 0 | Starting number (Not yet supported) to | number | from + 10 | Ending number duration | number | ? | Duration (Not yet supported)

Examples

<ngx-countto [from]=1 [to]=100></ngx-countto>
<ngx-countto [id]="'countto_01'" [to]=18000></ngx-countto>

class AppComponent implements OnInit {

  constructor(private counttoService: CountToService) {}
  ngOnInit() {
    this.counttoService.start();

    setTimeout(() => {
      this.counttoService.start('countto_01');
    }, 2000);
  }
}

License

MIT © Kris Nyunt