Angular debounce directive

debounce.directive.ts

import { EventEmitter, ElementRef, OnInit, Directive, Input, Output } from '@angular/core';

import { fromEvent } from 'rxjs';

import { map, debounceTime } from 'rxjs/operators';

import { NgModel } from '@angular/forms';


@Directive({ selector: '[debounce]' })
export class Debounce implements OnInit {
  @Input() delay: number = 700;
  @Input() eventName: string = 'keyup';
  @Output() func: EventEmitter<any> = new EventEmitter();

  constructor(private elementRef: ElementRef, private model: NgModel) {
  }

  ngOnInit(): void {
    const eventStream = fromEvent(this.elementRef.nativeElement, this.eventName).pipe(
      map(() => this.model.value),
      debounceTime(this.delay)
    )

    eventStream.subscribe(input => this.func.emit(input));
  }

}

Example:

<input debounce [delay]="300" type="text" name="term"  #term (func)="doThing(term.value)" [(ngModel)]="searchTerm" />