mergeMap vs concatMap vs exhaustMap in Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the operator that merges inner observables concurrently.

Angular

import { [1] } from 'rxjs/operators';

Drag options to blanks, or click blank then click option'

AconcatMap

BmergeMap

CexhaustMap

DswitchMap

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing mergeMap with concatMap which queues inner observables.

Using switchMap which cancels previous inner observables.

The mergeMap operator merges inner observables concurrently, allowing multiple active subscriptions.

2fill in blank

medium

Complete the code to use the operator that queues inner observables and runs them one after another.

Angular

source$.pipe([1](value => innerObservable(value)))

Drag options to blanks, or click blank then click option'

AexhaustMap

BmergeMap

CconcatMap

DswitchMap

Attempts:

3 left

💡 Hint

Common Mistakes

Using mergeMap which runs inner observables concurrently.

Using exhaustMap which ignores new inner observables while one is active.

concatMap queues inner observables and subscribes to them one at a time, preserving order.

3fill in blank

hard

Fix the error in the code to use the operator that ignores new inner observables while one is active.

Angular

source$.pipe([1](value => innerObservable(value)))

Drag options to blanks, or click blank then click option'

AexhaustMap

BconcatMap

CmergeMap

DswitchMap

Attempts:

3 left

💡 Hint

Common Mistakes

Using mergeMap which allows concurrent inner observables.

Using concatMap which queues inner observables instead of ignoring.

exhaustMap ignores new inner observables if the previous one is still running, preventing overlap.

4fill in blank

hard

Fill both blanks to create a mapping that runs inner observables one after another and logs each value.

Angular

source$.pipe([1](value => innerObservable(value))).subscribe(val => console.log([2]));

Drag options to blanks, or click blank then click option'

AconcatMap

BmergeMap

Cval

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using mergeMap instead of concatMap for sequential execution.

Logging the wrong variable name inside subscribe.

Using concatMap ensures inner observables run sequentially, and logging val shows each emitted value.

5fill in blank

hard

Fill all three blanks to create a mapping that merges inner observables concurrently, filters values greater than 10, and logs them.

Angular

source$.pipe([1](value => innerObservable(value)), filter([2] => [3] > 10)).subscribe(val => console.log(val));

Drag options to blanks, or click blank then click option'

AconcatMap

BmergeMap

Cx

Dy

Attempts:

3 left

💡 Hint

Common Mistakes

Using concatMap instead of mergeMap for concurrent execution.

Using different variable names inconsistently in the filter function.

mergeMap merges inner observables concurrently. The filter uses x as the parameter to check values greater than 10.