ngx-counter

Version compatibility

Install later versions in case your app is not running the very latest angular version.

| ngx-counter/ngx-counter version | compatible angular version | Documentation | | -------------------------------------------- | -------------------------- | -------------------------------------------------------------------------- | | v11.x | v12, v11, v10, v9, v8 | [README]

Directive

For ease of use a directive ngxCounter.

Setup

First you need to install the core npm module:

npm install @baycke/ngx-counter --save

Then add the NgxCounterModule to the imports array of your application module:

import { NgxCounterModule } from '@baycke/ngx-counter';

@NgModule({
    imports: [
        /* Other imports here */
        NgxCounterModule
        ]
})
export class AppModule {
}

Usage

@Component({
   ...
   template: `...
        <div ngxCounter [end]="counterNumber" [countSpeed]="6000" [countInterval]="10" (counterValue)="getValue($event)">
            <h3>{{counterTestValue}}</h3>
        </div>
   ...`,
})
export class MyComponent {
}

Directive API

Additional attributes may be set on an DOM element using the ngxCounter directive for customization.

NgxCounter properties

| Attribute | Type | Default | Description | | ------------------------- | ----------- | ------------ |-------------- | | ngxCounter | | | Attribute adding counter | end | number | | | counterSpeed | number | 5000 | Speed in millisecond the animation should take. | counterInterval | number | 20 | couter interval

NgxCounter events

| Event | Type | Description | | --------------------- | ------- | ------------- | | counterValue | number |