File

dev-kit/src/defer-event/defer-event.plugin.ts

Description

Custom event plugin to defer event handling using debounce or throttle.

Usage

DeferEventPlugin is globally available in any application that imports the provideTalenraBaseConfig function from @talenra/components/config. This means that most probably, you can skip the next step and start using the plugin right away (see examples below).

In case you are using the plugin in a different context where provideTalenraBaseConfig is not used, you need to register it as a provider.

import { bootstrapApplication, EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
import { App } from './app';
import { DeferEventPlugin } from '@talenra/components/dev-kit';

bootstrapApplication(App, {
  // NOTE: If you are using provideTalenraBaseConfig, you do not need to add the plugin to the providers array,
  // as it is already included there.
  providers: [
    {
      provide: EVENT_MANAGER_PLUGINS,
      useClass: DeferEventPlugin,
      multi: true,
    },
  ],
});

Use the plugin in your templates by adding .debounce or .throttle to your event bindings, optionally followed by the custom delay in milliseconds.

<button (click.debounce.500)="onClick()">Click me</button>
<button (click.throttle.500)="onClick()">Click me</button>

Use the plugin in your component class by adding the appropriate event binding to the host element.

@Component({
  ...,
  host: {
    '(click.debounce.500)': 'handleDebouncedClick()',
    '(click.throttle.500)': 'handleThrottledClick()',
  },
})

Import

import { DeferEventPlugin } from '@talenra/components/dev-kit';

Extends

EventManagerPlugin