angular 9+ count-animation
Table of contents
About
A package that elegantly animates number changes, creating a visually engaging transition from one value to another, perfect for counting or displaying real-time data updates.
Getting started
Installation
npm install ngx-count-animationStandalone component
import { Component } from '@angular/core';
import { NgxCountAnimationModule } from 'ngx-count-animation';
@Component({
selector: 'app-root',
standalone: true,
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
imports: [ NgxCountAnimationModule ],
})
export class AppComponent {}Or for Module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxCountAnimationModule } from 'ngx-count-animation';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxCountAnimationModule,
],
bootstrap: [AppComponent]
})
export class AppModule { }Documentation
Inputs
| Option | Type | Default | Comment |
|---|---|---|---|
| ngxCountAnimation | number | Sets the target count for the count animation. | |
| maximumFractionDigits | number | 0 | The maximum number of fraction digits to display. |
| minimumFractionDigits | number | 0 | The minimum number of fraction digits to display. |
| duration | number | 2000 | Sets the duration of the count animation. |
| durationFromValue | number | Sets the duration based on the given value. | |
| highPerformance | boolean | true | When highPerformance is false, an interval listener is active to detect layout changes. |
Outputs
| Option | Type | Comment |
|---|---|---|
| startAnimation | EventEmitter | Emits an event at the start of the animation. |
| endAnimation | EventEmitter | Emits an event at the end of the animation. |
Example
Simple example
<div ngxCountAnimation="1000000"></div>Complete example demonstrating all properties
<div
ngxCountAnimation="123456789"
duration="2000"
maximumFractionDigits="0"
minimumFractionDigits="0"
highPerformance="true"
></div>Contributing
I welcome contributions from the open-source community to make this project even better. Whether you want to report a bug, suggest a new feature, or contribute code, I appreciate your help.
Bug Reports and Feature Requests
If you encounter a bug or have an idea for a new feature, please open an issue on my GitHub Issues page. I will review it and discuss the best approach to address it.
Code Contributions
If you'd like to contribute code to this project, please follow these steps:
- Fork the repository to your GitHub account.
- Clone your forked repository to your local machine.
git clone https://github.com/hm21/ngx-count-animation.git