This is an Angular directive wrapper around the core functionality of CountUp which is maintained in the CountUp.js repo. MIT License.
Or see this angular version work by cloning this project and running ng serve
.
This module supports Angular 7 and newer. The CountUp module for Angular 1.x is here.
Contents:
Install the package in your project. For Angular 13 and newer:
yarn add ngx-countup
or npm i ngx-countup
If you are using an older version of Angular, use the following:
yarn add ngx-countup@7
or npm i ngx-countup@7
In app.module.ts
, import the module:
import { CountUpModule } from 'ngx-countup';
@NgModule({
imports: [
...
CountUpModule
],
...
})
Use it in your markup. Since it's a directive, it can be added to any element:
<h1 [countUp]="345" (complete)="doSomethingOnComplete()">0</h1>
Bind [countUp] to some property. Leave endVal
undefined and the animation won't start until endVal
has a value.
<h1 [countUp]="myEndVal" [options]="myOpts">0</h1>
Inputs:
countUp
: number to count tooptions
: CountUpOptions - fine-grain control over CountUpreanimateOnClick
: pass false to disable (defaults to true)
Outputs:
complete
: emits when the animation completes
Yes, this component works with SSR and prerendering!
Check out this separate SSR demo repo for a working example.
The test app in this repo has a passing test for a component that uses the CountUp directive, which you can use as an example. If your component uses the CountUp directive, include the CountUpModule in your TestBed:
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
CountUpModule,
...
],
...
})
});
For Jest, I used jest-preset-angular. Make sure you have the following in your jest.config.js:
transform: {
'^.+\\.(js|ts|tsx)$': 'ts-jest'
},
transformIgnorePatterns: ['node_modules/(?!countup.js)']
And make sure you add this under compilerOptions
in your root tsconfig.json:
"allowJs": true,
Before you make a pull request, please follow these instructions:
- Make your edits to
./projects/count-up/src/lib/count-up.directive.ts
. - Run
ng s
and test your changes in the demo app.
Publishing (you don't need to do this, it’s for my own reference):
- Increment the version number if necessary (and
install-tarball
script). - Commit changes.
- Run
yarn package:countup
which builds and packs a tarball. - Install the tarball in the test app:
yarn install-tarball
. - Make app.module import from newly installed package.
- Run the test app with AOT compiler and make sure the demo works:
ng serve --prod
. - Run
npm publish dist/count-up
- Discard changes.