Angular Count Animations

Demo Website

Table of contents

• About
• Getting started
• Documentation
• Example
• Contributing
• License

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-animation

Import the directive

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 {}

Optional Global Configs

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...
    }),
  ],
};

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.
detectLayoutChanges	boolean	true	When detectLayoutChanges is set to true, there is always an interval listener active that detects 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" detectLayoutChanges="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:

1. Fork the repository to your GitHub account.
2. Clone your forked repository to your local machine.

git clone https://github.com/hm21/ngx-count-animation.git