angular2-counto

Awesome angular package for counting animations.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular2-counto
4151.2.55 years ago7 years agoMinified + gzip package size for angular2-counto in KB

Readme

angular2-counto
Angular 5 package for nice count animations

Installation

npm install angular2-counto --save

SystemJS

var map = {
  'angular2-counto':     'node_modules/angular2-counto/src'
};

var packages = {
  'angular2-counto':   { main: 'counto.module.js', defaultExtension: 'js' }
};
 ```

### Angular-CLI
Just import module as below:


 ```
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { CountoModule }  from 'angular2-counto';

 @NgModule({
   imports:      [ BrowserModule, CountoModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

Example with currency pipe: ```
step="30" countTo="10" countFrom="0" duration="4" (countoChange)="counto = $event" (countoEnd)="onCountoEnd()">{{counto | currency:'EUR':'symbol':'1.2-2'}}
```

Usage

| Parameter | Required | Unit | Description | | ------------- | ------------- | ------------- | --------------------------------------- | | step | yes | milisecond | How fast counter is updated | | countTo | yes | number | Any start number | | countFrom | yes | number | Any end number |
| duration | yes | seconds | Duration of animation |
Any of above parameters can be freely binded to an event. Every time parameter changes, animation will be executed. You can use any pipe you want to modify output to your needs.

Demo

http://izupet.github.io/angular2-counto