ngx-counter
TypeScript icon, indicating that this package has built-in type declarations

0.3.2 • Public • Published

ngx-counter

Customizable counter component for Angular 2+

npm version license

Installation

NPM

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>

ngx-counter

License

MIT © Kris Nyunt

Package Sidebar

Install

npm i ngx-counter

Weekly Downloads

4

Version

0.3.2

License

MIT

Last publish

Collaborators

  • krisn