This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Prevent unnecessary requests in Angular 2 with distinctUntilChanged

    Christoph BurgdorfChristoph Burgdorf

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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss