What the map When we want to use a flattening operator you usually come across switchMap but this is not the only map operator we have. We have a total of 4 maps to choose from: mergeMap (or flatMap which is an alias) concatMap switchMap exhaustMap mergeMap/flatMap This will concurrently handle each dispacthed request, this means it will not wait for any other request to complete and also doesn’t abort the previous one if a new request is fired. Read more

Marble diagrams Marble diagrams are a way to visually represent Observables. The marbles represent a value being emitted, the passage of time is represented from left to right, a vertical line represents the completion of an Observable, and an X represents an error. - represents the passage of 10 frames of time. | represents the completion of an Observable. ^ represents the subscription point of an Observable (only valid for hot Observables). Read more

Note: This post is still underconstruction. You can view observables as the 2.0 version of Promise. The big gain in using observables is that you can have a stream of information instead of the one return value of a promise. Map Map return a new stream based on the inital stream, it does not modify the original stream in any way. With this immutablility we allow chaining of functions. The map(f) function replaces each emitted value according to a function f you provide. Read more

When using the async pipe with multiple subscriptions on the store there will be multiple options requests, the actual requests are combined to one request. To combine the different request we can use share(). HTML template example: <ama-module-menu [course]="course | async"></ama-module-menu> <ama-module-content [course]="course | async"></ama-module-content> Your filling the course observable use the share() operator. ngOnInit() { this.course = this.activatedRoute.paramMap .takeWhile(() => this.alive) .tap(params => this.store.dispatch(new LoadCourseAction({ id: params.get('courseId') }))) . Read more

C depends on B -> B depends on A. First, notice that I am setting the value of the courses property to the result of the switchMap() operator. I use the tap() operator to tranparently perform an action (or side effect), in this case, to dispatch() the LoadCoursesForUserAction action. The tap() operator will receive the user that is emitted from the observable that is created using the select() method. Finally, using the switchMap() operator, the inner observable (obtaining the user) is complete, returning the observable of the array of Course objects. Read more