Rxjs Heaven (Part3: Higher-order operators )

Introduction ๐ฉ :

Hello Dear Readers
Making everything reactively is a trend in web development currently with the most famous JS frameworks not only with Angular! so I decided to start a series of blogs about Rxjs ๐ฅ (A reactive programming library) and cover the most use cases with code examples to help you clearly understand why I called Rxjs a Heaven โ๏ธ
This series of blogs will contain :
- Part1: Error Handling With Rxjs (Published )
- Part2: Multi-Casting Operators with Rxjs (Published )
- Part3: Higher-order operators with Rxjs ( Current blog )
- Part4: Custom operators with Rxjs ( coming soon โณ)
Each part will contain an explanation for the operators, code _examples, and the most use cases for each one
Happy reading :)
Higher-order operators:
There are a lot of important operators in reactive programming, one of them are higher-order mapping operators: switchMap, mergeMap, concatMap, and exhaustMap which they are the most used operators with Rxjs ,
And they are the most difficult operators to understand.
And thatโs the goal of this blog , trying to explain them with example code and code explanation
Definition โ๏ธ :
A higher-order Observable is an Observable that emits other Observables
Advantage โ๏ธ :
They are used to avoid the nested subscription anti-pattern
(A) concatMap Operator ๐:
concatMap is a combination of two operators concat and map that can be used to run Observables in sequence.
Code-Example ๐:
Code-Explanation ๐:
In this code example, we tried to make a sequence of API calls by using concatMap Operator
- for: operator used to iterate the array values will be emitted as a sequence!
- ajax: It creates an observable for an Ajax request
- concatMap: will be used to run the observable list in sequence and wait for all these subscriptions to be finished to complete
Result Execution :

(B) The switchMap Operator ๐:
SwitchMap is an operator that can be used for Observable Switching :
subscribes to a new inner observable, it unsubscribes from the previous one.

Usage :
With Route Parameters
Angular Forms ValueChanges event
This works perfectly for scenarios like typeaheads where you are no longer concerned with the response of the previous request when a new input arrives. This also is a safe option in situations
Code-Example ๐:
Code-Explanation ๐:
- terms: Observable<string> :
- debounceTime(400): this operator used to delay values emitted by the source Observable terms
- distinctUntilChanged(): this operator used to emit value only when the new value is different from the current one
- switchMap((term):
- this.http.get(this.baseUrl + this.queryUrl + term): this code to mak an API call with httpClient provided by Angular
(C) mergeMap Operator ๐:
MergeMap is an operator that can be used to run sequentially observables

Code-Example ๐:
Code-Explanation ๐:
- getPosts: a function to make an API call to get the list of posts
- getCommentsWithPost: to get list of comments related to the post in params
- tap((item) => console.log(โyes !โ, item)) : an operator used for side-effect to log each mapped item
- mergeMap(this.getCommentsWithPost) : we will use the mergeMap operator to ..
References ๐ ๐ :
- https://blog.angular-university.io/rxjs-higher-order-mapping/
- https://blogs.msmvps.com/deborahk/higher-order-observable/
- https://blog.richardmuscat.com/2020/06/01/rxjs-higher-order-observables.html
- https://indepth.dev/reference/rxjs/operators/concat-map
- https://rxjs.dev
- https://www.learnrxjs.io/
- https://netbasal.com/understanding-mergemap-and-switchmap-in-rxjs-13cf9c57c885
Conclusion โค๏ธ๐:
For Conclusion, we explored the Rxjs high order operators with some cod-examples and use cases
I hope it helps and you enjoyed it ๐
If you liked this post feel free to leave a ๐, and follow me on Twitter and Github
Thanks ๐