Implementing a search-box with Autosuggest feature in Angular - using RxJS Operator 'switchMap'.

#angular19 #fullstackdevelopment #dotnetcore #webdevelopment #rxjs #switchMap #angulardevelopment

For source code download, visit Patreon:   / codeanddiscussionswithprotik  

Please take your time to watch the video closely and in minute details. I have discussed how to build a search-box with Autosuggest and 'Loading' spinner. I have explained the usage of a number of Reactive operators like pipe, map, tap, filter, catchError, debounceTime, distinctUntilChanged and most importantly, higher order flattening operator 'switchMap' - IN SIMPLEST TERMS POSSIBLE. Still, I recommend the audience to visit the official Angular documentation site and understand the concepts FORMALLY, before you watch this discussion.
Building a truly reactive application is not just about using the latest libraries and packages. It is about INCLUSION. So that an aged person of 80 feels the same degree of ease and seamless experience as a normal user, while interacting with your app.

You will learn some crucial things from the source code:
how to bind a 'formControl' to a input type search-box and attach a (keydown) event-listener to respond to user interaction and keyboard navigation events while selecting an item from the autosuggest list
where and how to use '{ emitEvent: false }' to prevent sending a request all over again when you select an item from the autosuggest list to fill the search-box
how to use 'debounceTime' to introduce a specific amount of delay before sending a request to backend webAPI
how to use 'distinctUntilChanged' to proceed if the value has changed(thus negating duplicate requests) and also apply 'filter' to filter out micro-query terms, for eg. terms containing 3 or less characters.
how to use 'switchMap' astutely to switch to the latest query term and send requests to webAPI endpoints accordingly;
how to show a 'loading' spinner while the response from webAPI is being received and hide it when the results are fetched and displayed in the form of a autosuggest list
how to use 'finalize' to hide the spinner in case of a bad-response/exception received from the webAPI endpoint
how to use the 'ngOnDestroy' life-cycle hook and 'takeUntil' to prevent memory leaks and keep our app CPU-extensive

I would like it very much if LIKE & a SHARE the video to spread the word. Your word of appreciation and reviews would be immensely appreciated!