1 | # angular2-counto
|
2 |
|
3 | Angular 5 package for nice count animations
|
4 |
|
5 | ## Installation
|
6 | ```
|
7 | npm install angular2-counto --save
|
8 | ```
|
9 |
|
10 | ### SystemJS
|
11 | ```
|
12 | var map = {
|
13 | 'angular2-counto': 'node_modules/angular2-counto/src'
|
14 | };
|
15 |
|
16 | var packages = {
|
17 | 'angular2-counto': { main: 'counto.module.js', defaultExtension: 'js' }
|
18 | };
|
19 | ```
|
20 |
|
21 | ### Angular-CLI
|
22 | Just 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 |
|
38 | Example 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 |
|
52 | Any of above parameters can be freely binded to an event. Every time parameter changes, animation will be executed.
|
53 | You can use any pipe you want to modify output to your needs.
|
54 |
|
55 | ## Demo
|
56 |
|
57 | http://izupet.github.io/angular2-counto
|
58 |
|
\ | No newline at end of file |