In this Angular 13 tutorial, you will learn how to make the API search calls to a remote server in an optimized way. By using the RxJS operators and functions we can minimize the number of API calls made to the server and same time improve the usability of the application by implementing the debounceTime
, filter
and distinctUntilChanged
to bring a magical change in your app.
This application will fetch remote server responses using a third-party API by using the HttpClientModule of Angular to make HTTP calls. By using the RxJS library we’ll control server API hits a user makes while communicating with the server limiting the network resources to optimize the client application.
Many of the real-world applications have search features that filter data fetched from a server or connected to some third-party API. In a 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 the user types in “car” then three API hits for each character will be made.