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 combine multiple Observable streams using the flatMap operator

[00:00] We're doing pretty good with our instant search, but there are still a couple of things left to tackle such as dealing with out of order responses. While I prefer we dive into that, let's first improve ergonomics of our code to already pave the way for the more advanced stuff.

[00:13] Notice that we have one subscribed call here, and when it's called, it invokes the search method on our component. Then we have the search method itself, which makes the service call, and subscribes to the results. Basically, we have two subscribed calls in our code which are loosely connected via a method call.

[00:29] Since observables are all about composibility, these things are often the code's mouth. Imagine we would simple map on the current on the search term, their service call which returns an observable of a ray of string. We can totally do that, and we end up with an observable of observable of a ray of string, which can be a bit of a brain twister at first.

[00:48] Now, when we subscribe here, the payload is the observable that our service call returned which means we still have to subscribe within our observable to get through the actual area of strings that we are interested in. We give it a function, and say this.items equals results. Now, we should remove the search method from our components since we don't use it anymore.

[01:07] When we turn to our browser, we will notice that everything still works as expected. However, we still have two subscribed calls, because our payload became an observable itself. Luckily, there's an operator called match map, or flatMap which lets us map to another observable.

[01:24] Instead of our simple map which turns your observable into an observable of observable, when you do that, flatMap automatically subscribes to these inner observables, and flattens them into just one observable of the same type.

[01:39] Notice that we have to write the import as match map since flatMap is simply an alias to match map. All we have to do now is to change map to flatMap, or match map if you prefer. Since flatMap flattens for us behind the scenes, we don't have an observable of observable anymore.

[01:54] Which means we can change the call back of our subscribe because it now receives the plane area of terms instead of an observable that we manually have to subscribe to. Once again, we turn to our browser, and we see that everything works just like before, but the code is a lot cleaner now.

Course

Build an Angular Instant Search Component

Combine Observables in Angular 2 with flatMap

Share this video with your friends