angular2-counto
TypeScript icon, indicating that this package has built-in type declarations

1.2.5 • Public • Published

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

Package Sidebar

Install

npm i angular2-counto

Weekly Downloads

3,439

Version

1.2.5

License

MIT

Unpacked Size

30.8 kB

Total Files

36

Last publish

Collaborators

  • izupet