Animates A Numerical Value By Counting for Angular | ngx-countUp

CountUp.js is a lightweight, dependency-free JavaScript that can be used to quickly create animations that display numerical data in a more interesting way.

ngx-countup is an Angular directive wrapper around the core function of CountUp which is kept in the CountUp.js repo.

Must Read – A Lightweight Vanilla JavaScript Library for Counter Effects

How to make use of it:

Install the package in your project:

yarn add ngx-countup or npm i ngx-countup

In app.module.ts, import the module:

import { CountUpModule } from 'ngx-countup';

@NgModule({
  imports: [
    ...
    CountUpModule
  ],
  ...
})

Use it in your coding. Since it is a directive, it can be added to any element:

<h1 [countUp]="345" (complete)="doSomethingOnComplete()">0</h1>

Inputs:

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

Outputs:

  • complete: emits when the animation completes

Animate Counting Of Numeric Value, ngx-countup – CountUp.js in Angular Plugin/Github

Read More –¬†

Angular Timer Component With Countup & Countdown | Cd-Timer
Javascript Countdown/Stopwatch Timer Hooks For Vue


See Demo And Download

Official Website(inorganik): Click Here

This superior jQuery/javascript plugin is developed by inorganik. For extra Advanced Usage, please go to the official website.

Share