ngx-countup - CountUp.js in Angular

This is an Angular directive wrapper around the core functionality of CountUp which is maintained in the CountUp.js repo by the same author. MIT License.

CountUp.js demo

Or see this angular version work by cloning this project and running ng serve.

Compatibility

Angular version	ngx-countup version	API Changes
21+	21	Use countUpOptions input for options
13-20	13.2.0	Use options input for options
7-12	7.3.3	-

Contents:

• Usage
• Contributing

Usage

Install the package in your project. For Angular 21 and newer:

npm i ngx-countup

---

In your component, import the directive:

import { CountUpDirective } from 'ngx-countup';

@Component({
  selector: 'app-some-component',
  imports: [
    CountUpDirective
  ],
  ...
})

Use it in your template. Since it's a directive, it can be added to any element:

<h1 [countUp]="345">0</h1>

Note: The component is safe for server side rendering.

Inputs:

• countUp: number to count to
• countUpOptions: CountUpOptions - fine-grain control over CountUp
• reanimateOnClick: pass false to disable (defaults to true)

Outputs:

• complete: emits when the animation completes

Auto animate when element becomes visible

Use the autoAnimate option to animate when the element is scrolled into view or appears on screen.

<h1 [countUp]="myEndVal" [countUpOptions]="{ autoAnimate: true }">0</h1>

Re-animate

To re-animate CountUp programmatically, add a template ref variable to the markup (with #):

<h1 #countUp [countUp]="myEndVal" [countUpOptions]="myOpts">0</h1>

Then, select it with @ViewChild in your component's Typescript file (using the template ref you created).

  @ViewChild('countUp') countUp: CountUpDirective;

Then call the animate function where needed.

this.countUp.animate();

Remember to do this inside ngAfterViewInit() to do something on component load.

Contributing

Before you make a pull request, please follow these instructions:

1. Make your edits to ./projects/ngx-countup/src/lib/ngx-countup.directive.ts.
2. Build the lib: npm run build:countup
3. Test your changes in the demo app: npm start
4. Ensure tests pass: npm t -- ngx-countup