Using the switchMap and debounceTime operators with autocompletes for better performance

For a lot of apps, we have features such as searching content as the user types. This is a really good User Experience (UX) as the user doesn’t have to press a button to do a search. However, if we send an HTTP call to the server on every key press, that’s going to result in a lot of HTTP calls being sent, and we can’t know which HTTP call will complete first; thus, we can’t be sure if we will have the correct data shown in the view or not. In this recipe, you’ll learn how to use the switchMap operator to cancel out the last subscription and create a new one instead. This would result in canceling previous HTTP calls and keeping only one HTTP call—the last one. We’ll use the debounceTime operator to wait for the input to be idle before it even tries to make one call.

Getting ready

The app that we are going to work with resides in start/apps...