UNPKG

1.73 kBMarkdownView Raw
1# angular2-counto
2
3Angular 5 package for nice count animations
4
5## Installation
6```
7npm install angular2-counto --save
8```
9
10### SystemJS
11```
12var map = {
13 'angular2-counto': 'node_modules/angular2-counto/src'
14};
15
16var packages = {
17 'angular2-counto': { main: 'counto.module.js', defaultExtension: 'js' }
18};
19 ```
20
21### Angular-CLI
22Just import module as below:
23
24
25 ```
26 import { NgModule } from '@angular/core';
27 import { BrowserModule } from '@angular/platform-browser';
28 import { CountoModule } from 'angular2-counto';
29
30 @NgModule({
31 imports: [ BrowserModule, CountoModule ],
32 declarations: [ AppComponent ],
33 bootstrap: [ AppComponent ]
34 })
35 export class AppModule { }
36```
37
38Example with currency pipe:
39 ```
40<div counto [step]="30" [countTo]="10" [countFrom]="0" [duration]="4" (countoChange)="counto = $event" (countoEnd)="onCountoEnd()">{{counto | currency:'EUR':'symbol':'1.2-2'}}</div>
41 ```
42
43## Usage
44
45| Parameter | Required | Unit | Description |
46| ------------- | ------------- | ------------- | --------------------------------------- |
47| step | yes | milisecond | How fast counter is updated |
48| countTo | yes | number | Any start number |
49| countFrom | yes | number | Any end number |
50| duration | yes | seconds | Duration of animation |
51
52Any of above parameters can be freely binded to an event. Every time parameter changes, animation will be executed.
53You can use any pipe you want to modify output to your needs.
54
55## Demo
56
57http://izupet.github.io/angular2-counto
58
\No newline at end of file