Prevent Multiple Clicks
preventMultipleClicks is an Angular directive that debounces rapid repeated clicks on any interactive element. It uses RxJS throttling so only one click is processed within a configurable time window — ideal for guarding form submissions, API calls, and navigation against duplicate actions.
Apply the preventMultipleClicks attribute to any clickable element, then listen to the throttleClick output instead of the native click event. The directive intercepts the click, calls preventDefault() and stopPropagation(), buffers the event through an RxJS Subject, and re-emits it only once per throttle period.
Common use cases include:
- Form submissions — preventing duplicate submissions.
- API calls — avoiding multiple simultaneous requests.
- Navigation — preventing multiple navigation triggers.
- Button actions — ensuring actions run once per time period.
The default throttle window is 2000ms. Override it with [throttleTime]. The directive works with any element (buttons, links, custom button components) and cleans up its subscription on destroy.
API
Selector
[preventMultipleClicks]
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
throttleTime | number | 2000 | Time in milliseconds to throttle clicks. Only one click is processed within this period. |
Outputs
| Name | Payload | Description |
|---|---|---|
throttleClick | Event | Emits the original click event after the throttle period expires, once per period. |
The emitted throttleClick event carries the original DOM event, so all event properties remain accessible. Works with template-driven and reactive forms and is compatible with Angular Material and custom button components.