ThrottleClickDirective

Defined in: directives/throttle-click.directive.ts:42

Throttles click events on an HTML element.

Remarks

Prevents rapid repeated clicks by allowing only one (throttleClick) event to fire within the configured interval. Works with any clickable element.

Examples

<button
  (throttleClick)="onCounterClick($event)"
  [throttleTimeMs]="300">
 Counter
</button>

@Component({
  standalone: true,
  selector: 'app-foo',
  imports: [ThrottleClickDirective]
})
export class FooComponent {
  onCounterClick(mouseEvent: MouseEvent): void {
    // ...
  }
}

Since

1.2.0

Author

Ian Wenneckers

Constructors

Constructor

new ThrottleClickDirective(): ThrottleClickDirective;

Defined in: directives/throttle-click.directive.ts:69

Returns

ThrottleClickDirective

Properties

Property	Modifier	Type	Default value	Description	Defined in
leading	readonly	InputSignal<boolean>	true	Whether the first click is emitted - default is true Remarks	directives/throttle-click.directive.ts:50
throttleClick	readonly	EventEmitter<MouseEvent>	undefined	-	directives/throttle-click.directive.ts:67
throttleTimeMs	readonly	InputSignal<number>	800	Duration of the throttle period in milliseconds. Remarks This value configures the timing used by the directive's throttling mechanism	directives/throttle-click.directive.ts:65
trailing	readonly	InputSignal<boolean>	true	Whether the last click is emitted - default is true Remarks	directives/throttle-click.directive.ts:57