Throttle Click

A lightweight Angular directive to throttle rapid clicks on elements — preventing multiple clicks within a specified time interval. Ideal for avoiding accidental or rage clicks on buttons or other interactive elements.

Features

• ⚡️ Lightweight and standalone
• ⏱️ Configurable throttle time (default: 1 second)
• 🚫 Stops multiple rapid-fire clicks
• ✅ Easy to integrate in standalone components or traditional Angular modules

Installation

npm install throttle-click

Usage With Standalone component

Import ThrottleClick and use it as a directive in your component:

import { ThrottleClick } from 'throttle-click';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ThrottleClick],
  template: `
    <button
      throttle-click
      [time]="5000"
      (onClick)="onButtonClick()"
    >
      Click me
    </button>
  `,
  styleUrl: './app.component.scss'
})
export class AppComponent {
  onButtonClick() {
    console.log('Button clicked!');
  }
}

Absolutely! Here's how you can update your README to include usage with an NgModule-based setup, alongside the standalone component usage you already have.

Usage with NgModule

If you're using Angular with NgModules (instead of standalone components), you can still use ThrottleClick by importing it into your module:

Step 1: Import the directive in your module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ThrottleClick } from 'throttle-click';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ThrottleClick // Import the directive here
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 2: Use it in your component template

<button throttle-click [time]="2000" (onClick)="handleClick()">Click Me</button>

export class AppComponent {
  handleClick() {
    console.log('Clicked with throttle!');
  }
}

Throttle Time

You can specify a custom throttle time using the time input in milliseconds:

<button throttle-click [time]="3000" (onClick)="onClick()">Click</button>

• If no time is provided, the default throttle duration is 1000 ms (1 second).

Use Case

This library is perfect for:

• Preventing double submissions
• Avoiding accidental multiple requests
• Improving UX by stopping "rage clicks"

Tip

Want to stop the user from rage clicking? Just wrap your button with throttle-click and set a safe cooldown time.