How to create an input search with debounce using Rxjs on Angular

Sometimes we need to create features like a search component that calls the API to return a search based on a string typed. The problem is we should prevent the application from calling the API many times because the user can type a lot fast and it is a problem.

Many developers would solve it with a library like Lodash, forgetting that it is super easy to solve it with Rxjs, the library included on the framework Angular.

In this example, I will focus on resolution with debounce using a simple component and input.

<input 
 type="text" 
 [ngModel]="search" 
 (ngModelChange)="handleSearch($event)" 
 placeholder="Quick Search">

Using the (ngModelChange) we are able to listen to any change on the model and get the last value, using standalone components we need to import FormsModuleas well.

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<input type="text" [ngModel]="search" (ngModelChange)="handleSearch($event)" placeholder="Quick Search">`,
  imports: [FormsModule],
})

Now all you need is a bit of code:

1) Declare the search variable:

search = '';

2) Initialize a BehavierSubject:

 searchSubject = new BehaviorSubject<string>('');

3) Sends the value to the Subject using ngModelChange:

handleSearch(search: string) {
  this.searchSubject.next(search);
}

4) Subscribe the Subject:

constructor() {
    this.searchSubject
    .pipe(debounceTime(550))
    .subscribe((search) => {
      console.log('Searching', search);
    });
}

Final results 🙌

Demo application