ng2-debounce

Deboune one or more native events in a angular 2 app with a directive.

Instalation

$ npm install ng2-debounce --save

Usage

1. Add the "ng2-debounce" directive to a native dom element.
2. Bind to "ng2dEvent" the event/s to debounce.
3. Listen to "ng2dOnEvent".

<input
  type="text"
  ng2-debounce
  [ng2dEvent]="'keyup'"
  (ng2dOnEvent)="myHandler($event)"
>

This is a list of parameters for the directive:

Name	Type	Required	Default	Description
ng2dEvent	string | string[]	yes		This should be set first and represent the event or group or events that should be debounced.
ng2dDelay	number	no	3000	Delay of the event in miliseconds.
ng2dOnEvent	function($event: any) => void	yes		A handler that will get all the info from the event.

Examples

Debounce one event

Debounce the "keyup" event and call "myHandler" when it is done.

<input
  type="text"
  ng2-debounce
  [ng2dEvent]="'keyup'"
  (ng2dOnEvent)="myHandler($event)"
>

Debounce multiple events

Debounce "keyup" and "change" events and call "myHandler" when any of this is done.

<input
  type="number"
  ng2-debounce
  [ng2dEvent]="['keyup', 'change']"
  (ng2dOnEvent)="myHandler($event)"
>

Change the delay

Change the delay to execute "myHandler" to 1000 miliseconds. Works with multiple events.

<input
  type="text"
  ng2-debounce
  [ng2dEvent]="'keyup'"
  [ng2dDelay]="1000"
  (ng2dOnEvent)="myHandler($event)"
>

License

MIT © Alva Damián