ngx-countup

Import CountUpDirective from ngx-countup and add it to your component's imports array. You can then apply the directive to any HTML element using the [countUp] input to specify the target number.

import { CountUpDirective } from 'ngx-countup';

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

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

To use the directive in your Angular project, install the package via npm. For Angular 21 and newer, use the following command:

npm i ngx-countup

To trigger the animation manually, assign a template reference variable (e.g., #countUp) to the element. Use @ViewChild in your component to access the CountUpDirective instance and call its .animate() method. If you want to trigger the animation on component load, ensure you call .animate() inside the ngAfterViewInit() lifecycle hook.

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

@ViewChild('countUp') countUp: CountUpDirective;

// Inside a method or lifecycle hook
this.countUp.animate();

To trigger the animation automatically when the element is scrolled into view or appears on screen, set the autoAnimate property to true within the countUpOptions object.

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

The CountUpDirective provides the following inputs and outputs to control the animation behavior. Note that for Angular 21+, use countUpOptions for configuration, whereas older versions (13-20) use options.

### Inputs
- `countUp`: number to count to
- `countUpOptions`: [CountUpOptions](https://github.com/inorganik/countUp.js#options) - fine-grain control over CountUp
- `reanimateOnClick`: pass false to disable (defaults to true)

### Outputs
- `complete`: emits when the animation completes

Ensure you are using the correct version of ngx-countup and the correct input name based on your Angular version:

By default, the CountUpDirective will re-run the animation if the host element is clicked. This behavior is controlled by the reanimateOnClick input. If set to true, clicking the element triggers a reset() and start() of the CountUp instance. You can listen to the (complete) output to perform actions once the re-animation finishes.

<!-- This will restart the animation from the beginning every time it is clicked -->
<div [countUp]="500" [reanimateOnClick]="true" (complete)="onAnimationComplete()"></div>

The CountUpDirective provides an Angular directive to implement the CountUp.js animation on an element. It is a standalone directive that uses the [countUp] input to define the target number.

To use it, apply the countUp selector to an HTML element and provide the target value. You can also pass configuration options via [countUpOptions] and control whether the animation restarts on click via [reanimateOnClick].

<div [countUp]="100" [countUpOptions]="myOptions"></div>

The CountUpDirective exposes the following API for configuration and event handling:

Inputs

• countUp (alias for endVal): Required. The target number you want the animation to count up to.
• countUpOptions: An object of type CountUpOptions (from countup.js) to configure the animation behavior (e.g., duration, easing, decimals).
• reanimateOnClick: A boolean (defaults to true) that determines if the animation should restart when the element is clicked.

Outputs

• complete: Emits a void event when the animation finishes.

/* 
Inputs:
- endVal = input.required<number>({ alias: 'countUp' })
- countUpOptions = input<CountUpOptions>({})
- reanimateOnClick = input(true)

Outputs:
- complete = output<void>()
*/