Angular : RxJS concatMap operator

diptee — Sat, 06 Nov 2021 14:41:41 +0000

In Angular, we use HTTP to get data from backend,HTTP methods always return an observable.Generally we subscribe to that observable and assign response data to class variables to use it in our component.
But using RxJS operators we can compose multiple observables(data streams) or process observable data before subscribing to it.

RxJS concatMap operator
It is a High-order Mapping operator an operator that takes value from an outer observable and maps it into inner observable instead of plain values(Observable emits observable).

concatMap operator

Takes each value from the outer observable and maps that value to observable(called as inner observable)
Concat all inner observables into a single observable in order and subscribe to inner observables and emit data of each inner observable into output observable in sequential manner.
concatMap never subscribes to the next inner observable until the previous one completes.

Example:
Display first 3 toppers of the computer department on UI with ROLL NUMBER & MARKS.

Run live

Here we have 2 API’s
1.First API to get roll numbers of first 3 toppers.
2.Second API to get marks of topper taking roll number as input.

In the above case we need to take all roll numbers from the first API and pass it to the second API.
Normally in such scenarios developers use a nested subscription approach.

Here due to nested subscription approach output may vary,because we are hitting HTTP requests for each roll number,but here HTTP requests are not completing in sequential manner,depending upon which request completes first that request response data gets pushed in toppersList_1.

So solution to this problem is use concatMap RxJS operator instead of nested subscription.
For given use-case,we need to use two concatMap operator.

First contactMap operator -
getToppers_rollNum() this method returns an Observable of type number[] , conactMap maps Observable<number[]> to Observable <number>(inner observable) then subscribes to inner observable and emit data into output observable(top_3_rollNum$).

Second concatMap operator -
Let's consider top_3_rollNum$ as outer observable.concatMap takes each roll number from the outer observable and hits http request sequentially(here we have 3 inner observables return by 3 http requests) & emits http response data into output observable(topper_marks$).

concatMap never hits the next http request until the previous one completes.

Shorthand syntax for above code

So,concatMap is used where sequence of execution matters.

Thanks for reading! If you found this helpful please share!

Angular : RxJS BehaviorSubject

diptee — Fri, 29 Oct 2021 07:22:47 +0000

As we know multiple components share the common data and always need updated shared data. In such scenarios most of the time BehaviorSubject is used which acts as a single store to hold updated shared data.

BehaviorSubject is both observer and type of observable.
BehaviorSubject always need an initial/default value.
Every observer on subscribe gets current value.
Current value is either latest value emitted by source observable using next() method or initial/default value.

Let’s implement BehaviorSubject to understand a concept better!

For e.g In order tracking app, display total items in cart and total items in wish list on UI in header and dashboard section based on user action.

Now we have three components -
HeaderComponent, DashBoardComponent, TableComponent

Run Live

When user add items in the cart/wishList, total count needs to be updated in the header and dashboard component.

1.First create a BehaviorSubject in order service which holds the initial state of order count ,so that it can be used by any component.

2.Now all observers(3 components) need to subscribe to source observable to get current value and show it on UI.

3.When a user performs any action, call the next() method of BehaviorSubject. When the next() method gets called it will update current count with new count and notifies updated count to all observers(3 Components) who subscribed to source observable.

This way BehaviorSubject makes components communication more effective.

P.S. Don't forget to unsubscribe all subscriptions in ngOnDestroy() to avoid memory leaks & unexpected output.

Thanks for reading! If you found this helpful please share!

DEV Community: diptee

Angular : RxJS concatMap operator

Angular : RxJS BehaviorSubject