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.

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

Contents:

• Usage
• Contributing

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

Scroll spy means it will automatically start animating when the CountUp element scrolls into view. Enable it in the options:

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

You can defer animation by leaving the property holding the end value undefined. So for instance, you could declare myEndVal in your component and the animation won't start until myEndVal has a value.

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

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;

Finally, call the animate function where needed.

this.countUp.animate();

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

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