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

Add provideNgxCountAnimations to your app.config.ts file as shown below.

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),

    /// Add the code below
    provideNgxCountAnimations(),
  ],
};

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. | | enableLayoutChangeDetection | boolean | true | When enableLayoutChangeDetection is set to true, there is always an interval listener active that detects layout changes. |

Outputs

| Option | Type | Comment | | :------------- | :----------------- | :-------------------------------------------- | | startAnimation | output | Emits an event at the start of the animation. | | endAnimation | output | Emits an event at the end of the animation. |

Simple example

<div ngxCountAnimation="1000000"></div>

Complete example demonstrating all properties

<div ngxCountAnimation="123456789" duration="2000" maximumFractionDigits="0" minimumFractionDigits="0" enableLayoutChangeDetection="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