ngx-counter
v0.3.2
Published
Customizable counter component for Angular 2+
Downloads
35
Readme
ngx-counter
Customizable counter component for Angular 2+
Installation
To install this library, run:
$ npm install ngx-counter --save
Usage
And then from your Angular AppModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import the library
import { CounterModule } from 'ngx-counter';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify the library as an import
CounterModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Once the library is imported, you can use its component in your Angular application:
<!-- You can now use the library component in app.component.html -->
<h1>
{{title}}
</h1>
<ngx-counter></ngx-counter>
Model binding
<ngx-counter [(ngModel)]="myCountValue"></ngx-counter>
Parameters
Parameter | Type | Default | Description
--- | --- | --- | ---
countValue | number | 0
| Count value that will be incremented
limit | number | countValue + 10
| Limit where counting will stop
speed | number | 1000
| Speed of the counter in milli-seconds
change | event | noop
| The callback function for each count change
size | string | medium
| Size of the counter display 'small', 'medium', 'big', 'large', 'xl'
font | string | monospace
| Font family to use
theme | string | blue
| Color theme 'blue', 'red', 'green', 'gray'
color | string | blue
| Main color for the number and the border (if no theme specified)
bgcolor | string | #d6f0f9
| Background color to use (if no theme specified)
Examples
<ngx-counter [(ngModel)]="counterStart" [limit]=10 size="small" theme="red"></ngx-counter>
<ngx-counter [countValue]=1 [limit]=10 font="cursive" theme="green"></ngx-counter>
<ngx-counter [countValue]=0 [speed]=1000 size="big" (change)="counterChanged($event)"></ngx-counter>
<ngx-counter [countValue]=-1 [limit]=counterFinish size="large" font="Arial" theme="gray"></ngx-counter>
<ngx-counter countValue=-2 limit=10 size="xl" color="gold" bgcolor="#F5F5DC"></ngx-counter>
License
MIT © Kris Nyunt