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.
npm install ngx-count-animation
import { Component } from "@angular/core";
import { NgxCountAnimationDirective } from "ngx-count-animation";
@Component({
selector: "app-root",
standalone: true,
templateUrl: "./app.component.html",
styleUrl: "./app.component.scss",
imports: [NgxCountAnimationDirective],
})
export class AppComponent {}
Add provideNgxCountAnimations
to your app.config.ts
file as shown below.
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideClientHydration(),
/// Add the code below
provideNgxCountAnimations({
duration: 2_000,
/// Other configs...
}),
],
};
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. | |
detectLayoutChanges | boolean | true | When detectLayoutChanges is set to true , there is always an interval listener active that detects layout changes. |
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. |
<div ngxCountAnimation="1000000"></div>
<div ngxCountAnimation="123456789" duration="2000" maximumFractionDigits="0" minimumFractionDigits="0" detectLayoutChanges="true"></div>
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.
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.
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