Angular 7/6 | Add Debounce Time using RxJS 6.x.x to Optimize Search Input for API results from server

Many of the applications have search bars which may be related to search any type of data may be available on the server or connected to some API. In normal practice a user types in the query to get related results in response. But in a technical sense if we bind a keyup event on an input search, then on every keyup event an API hit will be made for example if user types in “car” then three API hits for each character will be made.

This type of behavior on search inputs can affect application performance a lot as an API hit will be made on every keyup to the server.

The Solution Approach

Let’s think of an approach, after user types in a query of three characters then we can make an API Hit. In this case, only one meaningful Hit will be made instead of three. We can wait for the user to type the whole query first after that we can make API call. But how we can do that programmatically?

Debounce Time

Debounce Time is the delay which we can add between event subscriptions. Like we can add Debounce Time of 1000 milliseconds which resets after every KeyUp event by a user, if the gap of time between KeyUp event exceeds the 1000 ms then we make a subscription or make API call.

Let’s implement Debounce in Angular 7 application

We can achieve Debounce behavior in Angular application using React JS operators. Here in the demo application, we will have a search bar to find movies using free IMDB API services. We will add a debounce on search bar using RXJS version 6.3.3 in Angular with version 7.2.0.

See working demo here

Firs,t create a new Angular Project using CLI, make sure you have the latest version on Angular CLI installed

Now open the app.component.html file then update the template with following HTML

There is an Input field having Hash Variable #movieSearchInput using which we will bind KeyUp event using RxJS fromEvent

Using *ngFor we will iterate response in form of Bootstrap cards

Searching…” message will show up when API hit is made.

 

After updating the template, update app.component.ts file with following code.

Using angular’s @ViewChild we will get Element Reference using # variable we defined in the template.

In OnInit ( Angular’s component hook method fired after component ) we will bind keyup event using RxJS fromEvent method then pipe method operators like map, filter, debounceTime, distinctUntilChanged then finally subscribe to the response of the HTTP call method searchGetCall.

map: Get an instance of input to get the term typed in.

filter: Added to limit calls only if character length is greater then 2.

debounceTime: Time interval between each key event.

distinctUntilChanged: Emits event only if prev value is different from current.

How to add Condition in debounce using filter operator?

filter operator returns boolean true or false. If we return false debounce will not work. So we can easily add conditional debounce like if we want to check any other value is there before making a hit, then we can do like this.

 

So in the above example app, we got to know How we can implement Debounce Time to optimize search functioanlity in an Angular 7 application using RxJS v6 Operators.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of