Debounce Event using EventManagerPlugin

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <div class="ui container">
    <hr>
    <div class="ui input">
      <input type="text" (input.debounce.1000)="search($event)">
    </div>
  
    <p>{{ inputSearch }}</p>
  </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  inputSearch: string;

  search(event: InputEvent) {
    this.inputSearch = (<any>event.target).value;
  }

}

app.module.ts

import { BrowserModule, EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DebouceEvent } from './debounce.event';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    {
      multi: true,
      provide: EVENT_MANAGER_PLUGINS,
      useClass: DebouceEvent
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

debounce.event.ts

import { EventManager } from '@angular/platform-browser';

// Event Manager in Angular Source Code
//https://github.com/angular/angular/blob/master/packages/platform-browser/src/dom/events/event_manager.ts

// Event Manager in Angular Docs.
// https://angular.io/api/platform-browser/EventManager


// https://bestofjs.org/projects/30-seconds-of-code
function debounce(fn, ms = 0) {
    let timeoutId;
    return function (...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => fn.apply(this, args), ms);
    };
}


export class DebouceEvent {
    manager: EventManager;

    supports(eventName: string): boolean {
        return /debounce/.test(eventName);
    }


    addEventListener(
        element: HTMLElement,
        eventName: string,
        handler: Function
    ) {
        // input.debounce.1000
        // ['input', 'debounce', '10000']
        // I'm interested in first and third elements
        let [domEventName, , time = 300] = eventName.split('.'); 

        const guardedHandler = event => this.manager.getZone().runGuarded(() => handler(event));


        let debounceHandler = debounce(guardedHandler, +time);


        // Register Event in ELement
        this.manager.getZone().runOutsideAngular(() => {
            element.addEventListener(domEventName, debounceHandler);
        })

        // disposal function 
        // angular calls it when removes the element
        // For avoiding memory leaks
        return () => {
            element.removeEventListener(domEventName, debounceHandler);
            debounceHandler = null;
        }

    }
}