Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/omnedia/ngx-number-ticker
A simple number ticker effect to animate counting.
https://github.com/omnedia/ngx-number-ticker
Last synced: about 2 months ago
JSON representation
A simple number ticker effect to animate counting.
- Host: GitHub
- URL: https://github.com/omnedia/ngx-number-ticker
- Owner: omnedia
- License: mit
- Created: 2024-08-21T12:10:31.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-08-28T09:02:48.000Z (5 months ago)
- Last Synced: 2024-11-14T08:46:16.290Z (2 months ago)
- Language: TypeScript
- Size: 4.88 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- trackawesomelist - ngx-number-ticker (⭐1) - A simple number ticker effect to animate counting. (Recently Updated / [Oct 01, 2024](/content/2024/10/01/README.md))
- awesome-angular - ngx-number-ticker - A simple number ticker effect to animate counting. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-number-ticker - A simple number ticker effect to animate counting. (Table of contents / Third Party Components)
README
# ngx-number-ticker
`@omnedia/ngx-number-ticker` is an Angular library that provides a smooth animated number ticker. The component allows you to animate the counting of a number from its current state to a target value with customizable animation duration. This is perfect for dynamically displaying changing values such as counters, stats, or any number-based data in your Angular application.
## Features
- Smooth number ticker animation, counting up or down to a target value.
- Customizable animation duration.
- Easy to integrate as a standalone component.
## Installation
Install the library using npm:
```bash
npm install @omnedia/ngx-number-ticker
```
## Usage
Import the `NgxNumberTickerComponent` in your Angular module or component:
```typescript
import { NgxNumberTickerComponent } from '@omnedia/ngx-number-ticker';
@Component({
...
imports: [
...
NgxNumberTickerComponent,
],
...
})
```
Use the component in your template:
```html
```
## API
```html
```
- `countTo` (required): The target number to which the ticker will count up or down.
- `countDuration` (optional): The duration of the counting animation in milliseconds. Defaults to 2000ms.
- `transformFunction` (optional): Callback-Function to modify the displayed number. E.g. formatting it to toLocaleString()
- `styleClass` (optional): A custom CSS class to apply to the number ticker for additional styling.
## Example
```html
```
This will create a ticker that counts up to 5000 over a duration of 3000ms.
## Styling
You can apply custom styles to the ticker using the styleClass input. For example:
```css
.ticker-custom-style {
font-size: 48px;
color: #4caf50;
font-weight: bold;
text-align: center;
}
```
This example styles the ticker with a larger font size, green color, bold font weight, and centered text.
## Contributing
Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.
## License
This project is licensed under the MIT License.