Angular 2 package for nice count animations
Branch: master
Clone or download
Latest commit 9b467b5 Feb 9, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Add angular 5 support Feb 8, 2018
src
tests Tests Feb 23, 2016
.editorconfig Update to RC6 Sep 5, 2016
.gitignore Fix AOT compilation Feb 9, 2018
.npmignore
LICENSE Update installation Feb 27, 2016
README.md Add angular 5 support Feb 8, 2018
bs-config.json
index.ts Fix angular-cli support Apr 12, 2017
package.json Fix AOT compilation Feb 9, 2018
tsconfig.json Fix AOT compilation Feb 9, 2018

README.md

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:

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

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