@owaesmirza/angular2-counto

Angular 16+ package for nice count animations

Installation

npm i --save @awaismirza/angular2-counto

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:

<div counto [step]="30" [countTo]="10" [countFrom]="0" [duration]="4" (countoChange)="counto = $event" (countoEnd)="onCountoEnd()">{{counto | currency:'EUR':'symbol':'1.2-2'}}</div>

Usage

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.

Bye me a Coffee: https://paypal.me/tipawais

Demo

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