🚀 Counter Plugin (Angular)

A lightweight animated counter component for Angular.

Perfect for dashboards, statistics cards, analytics panels, and animated UI metrics.

The plugin supports customizable inputs like start, end, step, timer, and also prefix, suffix, and once for flexible UI counters.

✨ Features

• ⚡ Lightweight and fast
• 🧩 Built for Angular
• 🔧 Fully customizable inputs
• 🎯 Smooth animated number counting
• 🔁 Optional repeat animation
• 🧮 Supports prefix and suffix formatting

📦 Installation

Install the package using npm:

npm install @nawazaideveloperr/counter-plugin

🚀 Usage

Angular

Step 1: Import Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CounterModule } from '@nawazaideveloperr/counter-plugin';

@NgModule({
  imports: [
    BrowserModule,
    CounterModule
  ]
})
export class AppModule {}

Step 2: Use Component

<lib-counter
  [start]="0"
  [end]="1000"
  [timer]="2000"
  [step]="2">
</lib-counter>

Angular Standalone Component

For Angular 15+ standalone components, you can import the module directly inside the component.

import { Component } from '@angular/core';
import { CounterModule } from '@nawazaideveloperr/counter-plugin';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CounterModule],
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss',
})
export class HomeComponent {}

⚙️ Inputs / Props

| Input | Type | Default | Description | | ------ | ------- | ------- | ------------------------------------------------------------------------ | | start | number | 0 | Starting number of the counter | | end | number | 1000 | Ending number of the counter | | timer | number | 1000 | Animation duration in milliseconds | | step | number | 5 | Increment step size | | prefix | string | "" | Text displayed before the number (example: $) | | suffix | string | "" | Text displayed after the number (example: +, %) | | once | boolean | true | If true, counter runs only once. If false, it can trigger multiple times |

🎯 Examples

Basic Counter

<lib-counter
  [start]="0"
  [end]="500"
  [timer]="1500"
  [step]="5">
</lib-counter>

Counter with Prefix

<lib-counter
  [start]="0"
  [end]="10000"
  [prefix]="'$'">
</lib-counter>

Output:

$10000

Counter with Suffix

<lib-counter
  [start]="0"
  [end]="100"
  [suffix]="'%'">
</lib-counter>

Output:

100%

Counter with Plus Sign

<lib-counter
  [start]="0"
  [end]="5000"
  [suffix]="'+'">
</lib-counter>

Output:

5000+

Counter with Repeat Animation

<lib-counter
  [start]="0"
  [end]="1000"
  [timer]="2000"
  [once]="false">
</lib-counter>

If once is false, the counter animation can run multiple times when triggered.

💡 Use Cases

• Dashboard statistics
• Website visitor counters
• Sales analytics
• Marketing metrics
• Portfolio statistics
• Growth indicators

📄 License

MIT License

GitHub: https://github.com/devloper2017/counter-plugin

⭐ Support

If you like this project, please give it a star ⭐ on GitHub.

👉 https://github.com/devloper2017/counter-plugin

🤝 Contributing

Pull requests are welcome.

If you find a bug or want to improve the plugin:

1. Fork the repository
2. Create a new branch
3. Make your changes
4. Submit a pull request