title: How to convert button click debounce delay to text box key press delay?
body: <p>I have the following code written to debounce and delay the spamming of button presses:</p>
  
  <p><code>app.directive.ts</code>:</p>
  
  <pre><code>// Debounce click method for buttons to prevent spamming during asynchronous function waits
  
  import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';
  import { Subject, Subscription } from 'rxjs';
  import { debounceTime } from 'rxjs/operators';
  
  @Directive({
    selector: '[appDebounceClick]'
  })
  export class DebounceClickDirective implements OnInit, OnDestroy {
    @Input() debounceTime = 500;
    @Output() debounceClick = new EventEmitter();
    private clicks = new Subject();
    private subscription: Subscription;
  
    constructor() { }
  
    ngOnInit() {
      this.subscription = this.clicks.pipe(
        debounceTime(this.debounceTime)
      ).subscribe(e =&gt; this.debounceClick.emit(e));
    }
  
    ngOnDestroy() {
      this.subscription.unsubscribe();
    }
  
    @HostListener('click', ['$event'])
    clickEvent(event) {
      event.preventDefault();
      event.stopPropagation();
      this.clicks.next(event);
    }
  }
  </code></pre>
  
  <p><code>app.component.html</code>:</p>
  
  <pre><code>&lt;button mat-raised-button appDebounceClick (debounceClick)="buttonPressed()" [debounceTime]="700"&gt;Example Button&lt;/button&gt;
  </code></pre>
  
  <p>My end goal is to have a text box that will only call a function after the user has stopped typing for a certain amount of seconds (very similar to the button). How would I make a similar directive to instead work for the texting of a text box key press instead of a button click?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here is my current input textbox HTML (not debounced):</p>
  
  <pre><code>&lt;form class="form"&gt;
    &lt;mat-form-field class="full-width" (keyup)="exampleFunction('exampleInputString')"&gt;
      &lt;input matInput placeholder="Input something..."&gt;
    &lt;/mat-form-field&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p></p>