Handle repeated user clicks in your Angular application

Many times in our application frequent user clicks within fraction of seconds could cause our functionality to behave differently.

Src: https://clarity.microsoft.com/blog/rage-clicks-user-behavior/

For example:

• Showing up a modal on click (we don’t want to trigger opening multiple modals while we operate on blocking the view)
• Calling an API on click (we don’t want to trigger multiple calls within fraction of seconds)
• Creating an entry and disable the button on next change detection (we don’t want to create redundant entries while we disable the button in the next tick)
• and so on…

Attribute Directive to your rescue

An angular directive to handle frequent click streams in an intelligent way

Throttle approach

Consider the very first click and ignore any clicks made within N milliseconds after that

<button (click.throttle)="callMyFunction()">Click me!</button>

Debounce approach

Consider only the last click done within N milliseconds of time

<button (click.debounce)="callMyFunction()">Click me!</button>

A simple yet effective heck, isn’t it. I’m always motivated and keen on such solutions, so don’t hesitate to comment or give any feedback here or on my linkedIn. Thanks!