Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hm21/ngx-count-animation
A package that elegantly animates number changes, creating a visually engaging transition from one value to another, perfect for counting or displaying real-time data updates.
https://github.com/hm21/ngx-count-animation
angular angular2 animation count
Last synced: about 2 months ago
JSON representation
A package that elegantly animates number changes, creating a visually engaging transition from one value to another, perfect for counting or displaying real-time data updates.
- Host: GitHub
- URL: https://github.com/hm21/ngx-count-animation
- Owner: hm21
- License: mit
- Created: 2023-12-19T07:43:26.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-05-23T07:47:04.000Z (4 months ago)
- Last Synced: 2024-05-23T08:52:12.653Z (4 months ago)
- Topics: angular, angular2, animation, count
- Language: TypeScript
- Homepage:
- Size: 733 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-count-animation - A package that elegantly animates number changes, creating a visually engaging transition from one value to another, perfect for counting or displaying real-time data updates. (Table of contents / Third Party Components)
README
Angular Count Animations
[](https://badge.fury.io/js/ngx-count-animation)
[](https://badge.fury.io/js/ngx-count-animation)
[](https://badge.fury.io/js/ngx-count-animation)
[](https://opensource.org/licenses/MIT)
[](https://github.com/hm21/ngx-count-animation/issues)
[](https://ngx-hm21.web.app/count-animation)
## Table of contents
- [About](#about)
- [Getting started](#getting-started)
- [Documentation](#documentation)
- [Example](#example)
- [Contributing](#contributing)
- [License](LICENSE)
## About
A package that elegantly animates number changes, creating a visually engaging transition from one value to another, perfect for counting or displaying real-time data updates.
## Getting started
### Installation
```sh
npm install ngx-count-animation
```
### Import the directive
```typescript
import { Component } from "@angular/core";
import { NgxCountAnimationDirective } from "ngx-count-animation";
@Component({
selector: "app-root",
standalone: true,
templateUrl: "./app.component.html",
styleUrl: "./app.component.scss",
imports: [NgxCountAnimationDirective],
})
export class AppComponent {}
```
### Optional Global Configs
Add `provideNgxCountAnimations` to your `app.config.ts` file as shown below.
```typescript
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideClientHydration(),
/// Add the code below
provideNgxCountAnimations({
duration: 2_000,
/// Other configs...
}),
],
};
```
Documentation
### Inputs
| Option | Type | Default | Comment |
| :-------------------- | :------ | :------ | :-------------------------------------------------------------------------------------------------------------------- |
| ngxCountAnimation | number | | Sets the target count for the count animation. |
| maximumFractionDigits | number | 0 | The maximum number of fraction digits to display. |
| minimumFractionDigits | number | 0 | The minimum number of fraction digits to display. |
| duration | number | 2000 | Sets the duration of the count animation. |
| durationFromValue | number | | Sets the duration based on the given value. |
| detectLayoutChanges | boolean | true | When `detectLayoutChanges` is set to `true`, there is always an interval listener active that detects layout changes. |
### Outputs
| Option | Type | Comment |
| :------------- | :----------------- | :-------------------------------------------- |
| startAnimation | EventEmitter | Emits an event at the start of the animation. |
| endAnimation | EventEmitter | Emits an event at the end of the animation. |
Example
#### Simple example
```html
```
#### Complete example demonstrating all properties
```html
```
## Contributing
I welcome contributions from the open-source community to make this project even better. Whether you want to report a bug, suggest a new feature, or contribute code, I appreciate your help.
### Bug Reports and Feature Requests
If you encounter a bug or have an idea for a new feature, please open an issue on my [GitHub Issues](https://github.com/hm21/ngx-count-animation/issues) page. I will review it and discuss the best approach to address it.
### Code Contributions
If you'd like to contribute code to this project, please follow these steps:
1. Fork the repository to your GitHub account.
2. Clone your forked repository to your local machine.
```bash
git clone https://github.com/hm21/ngx-count-animation.git
```
