Consuming events as Observables in Angular 2

Debounce the user input in Angular 2 using debounceTime

Prevent unnecessary requests in Angular 2 with distinctUntilChanged

Combine Observables in Angular 2 with flatMap

Deal with out of order responses in Angular 2 using switchMap

Build fully reactive APIs in Angular 2 with Observables

Build an Angular Instant Search Component

In this video you'll learn how to use the distinctUntilChanged operator to prevent making unnecessary requests.

[00:00] Now that we debounced the user input, we are saving our API from tons of unnecessary traffic, but there's still room for improvement, and [inaudible] makes things really easy.

[00:10] When I type ANG and then rest my fingers, we see the request going out. Now, let's see what happens when I hit backspace to cut the G, and then put it right back in. What happens is that we make two subsequent requests to fetch items for the term ANG.

[00:28] Since we're already displaying the search results for exactly that character sequence, we could actually save the request. Thinking in terms of observable streams, what we need is an operator to filter out subsequent duplicate notifications.

[00:42] Let's import the distinctUntilChanged operator, which does exactly that. We can think of it as a filter operator that works over a buffer of the last two notifications to remove duplicates. We add it right after debounceTime operator.

[00:54] Let's turn to our browser again and do exactly what we did before. We type ANG, and we see the request goes out. Now, I hit backspace, remove the G, and put it right back in, and I do that a couple of times. We notice that it's not making any new requests. It's still making new requests as soon as the term changes, which is exactly what we want.

Course

Build an Angular Instant Search Component

Prevent unnecessary requests in Angular 2 with distinctUntilChanged

Share this video with your friends