How do I make the input send a whole word instead of each letter I type after a delay?

Question

search(value) {
   if(value.length > 3) {
        setTimeout(() => {
          searchApiCall();
        }, 2000);
      }
}

 <input type="text" class="form-control form-control-lg"  
          [(ngModel)]="SName" id="SName" 
          (input)="Search(SName)">

Now, this works but problem is that it calls the searchApi for each letter I type. I want it not to do that but a complete word after a delay.

Wants to save number of calls.

Answer 1

You could use debounceTime to delay value change emissions by a set time interval. You could then use skipWhile to ignore the first N character emissions (for example if you didn't want to search until the user typed at least N characters)

This would look something like:

SName.valueChanges
      .pipe(
        debounceTime(200),
        skipWhile(v => v.length < 3),
        takeUntil(this.unsubscriber)
      )
      .subscribe(value => (this.debouncedValue = value));