Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/inorganik/ngx-countUp

Animates a numerical value by counting to it - for Angular
https://github.com/inorganik/ngx-countUp

Last synced: about 2 months ago
JSON representation

Animates a numerical value by counting to it - for Angular

Awesome Lists containing this project

README 

        
# 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](https://github.com/inorganik/countUp.js). MIT License.



#### [CountUp.js demo](http://inorganik.github.io/countUp.js)

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](https://github.com/inorganik/countUp.js-angular1).



Contents:

- [Usage](#usage)

- [Angular Universal](#angular-universal)

- [Testing](#testing)

- [Contributing](#contributing)



## Usage



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



`npm i ngx-countup`



If you are using an **older version of Angular**, use the following:



`npm i ngx-countup@7`



---



In `app.module.ts`, import the module in your Angular module, or component if you are using standalone:

```ts

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:

```html

0


```



Inputs:

- `countUp`: number to count to

- `options`: [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



### Scroll Spy!



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



```html

0


```



### Defer animation



Bind [countUp] to some property. Leave `myEndVal` undefined and the animation won't start until `myEndVal` has a value.

```html

0


```

### Re-animate



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



```html

0


```



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



```ts

  @ViewChild('countUp') countUp: CountUpDirective;

```



Finally, call the animate function where needed.



```ts

  this.countUp.animate();

```



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



## Angular Universal



Yes, this component works with SSR and prerendering!



## Testing



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,

      ...

    ],

    ...

  })

});

```



## Contributing



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



1. Make your edits to `./projects/count-up/src/lib/count-up.directive.ts`.

1. Run `npm start` and test your changes in the demo app.



Publishing (you don't need to do this, it’s for my own reference):



1. Increment the version number if necessary (and `install-tarball` script).

1. Commit changes.

1. Run `npm run package:countup` which builds and packs a tarball.

1. Install the tarball in the test app: `npm run install-tarball`.

1. Make app.module import from newly installed package.

1. Run the test app with AOT compiler and make sure the demo works: `npm run serve:prod`.

1. Run `npm publish dist/count-up`

1. Discard changes.