Delay Method Execution in Angular | DebounceTime


How to delay a method call in Angular ? How to make the API call once user has finished typing ?

Assuming that you have the following Angular code sample,

this.formGroup.get('employee').valueChanges
    .subscribe(response => {
      this.makeAPICall();
    })

So each time the user enters a key the API call is called, which is not required. You can debounceTime to delay the method call.

import { debounceTime } from 'rxjs/operators';

this.formGroup.get('employee').valueChanges
    .pipe(debounceTime(1000))
    .subscribe(response => {
      this.makeAPICall();
    })