mergeMap vs concatMap vs exhaustMap in Angular

Introduction

These operators help manage multiple tasks that happen over time, like clicking buttons or loading data. They decide how to handle new tasks when old ones are still running.

When you want to start all tasks immediately and handle their results as they come (like loading multiple images at once).

When you want to run tasks one after another, waiting for each to finish before starting the next (like processing orders in sequence).

When you want to ignore new tasks if one is already running (like preventing double clicks on a submit button).

Syntax

Angular

sourceObservable.pipe(operator(projectFunction))

sourceObservable is the stream of events or data.

operator is one of mergeMap, concatMap, or exhaustMap.

Examples

Starts all HTTP calls immediately as values come in.

Angular

source$.pipe(mergeMap(value => httpCall(value)))

Waits for each HTTP call to finish before starting the next.

Angular

source$.pipe(concatMap(value => httpCall(value)))

Ignores new values if an HTTP call is already running.

Angular

source$.pipe(exhaustMap(value => httpCall(value)))

Sample Program

This Angular component listens for button clicks. Each click triggers a fake request that takes 1 second. Using mergeMap, all clicks start requests immediately, so results may overlap. Changing to concatMap makes requests run one after another. Using exhaustMap ignores clicks while a request is running.

Angular

import { Component } from '@angular/core';
import { fromEvent, of } from 'rxjs';
import { mergeMap, concatMap, exhaustMap, delay } from 'rxjs/operators';

@Component({
  selector: 'app-map-demo',
  template: `
    <button id="btn">Click me</button>
    <p>{{output}}</p>
  `
})
export class MapDemoComponent {
  output = '';

  ngOnInit() {
    const button = document.getElementById('btn');
    const clicks$ = fromEvent(button!, 'click');

    // Change operator here to mergeMap, concatMap, or exhaustMap
    clicks$.pipe(
      mergeMap(() => this.fakeRequest())
    ).subscribe(result => {
      this.output += result + '\n';
    });
  }

  fakeRequest() {
    // Simulates a request that takes 1 second
    return of('Request done').pipe(delay(1000));
  }
}

Important Notes

mergeMap is good for parallel tasks but can cause many overlapping results.

concatMap keeps order and waits, useful when sequence matters.

exhaustMap prevents overload by ignoring new tasks during an active one.

Summary

mergeMap: runs all tasks at once, results come as they finish.

concatMap: runs tasks one by one, preserving order.

exhaustMap: ignores new tasks if one is running, good for preventing duplicates.

Practice

1. Which RxJS operator runs all inner tasks at the same time and emits results as they complete, without waiting for order?

easy

A. switchMap

B. concatMap

C. exhaustMap

D. mergeMap

Solution

1. Step 1: Understand mergeMap behavior

   mergeMap subscribes to all inner observables immediately and merges their outputs as they arrive.

2. Step 2: Compare with other operators

   concatMap waits for each inner observable to complete before starting the next, exhaustMap ignores new inner observables if one is active, and switchMap cancels previous inner observables.

3. Final Answer:

   mergeMap -> Option D

4. Quick Check:

   Runs all tasks at once = mergeMap [OK]

Hint: All tasks at once means mergeMap [OK]

Common Mistakes:

• Confusing concatMap with mergeMap because both handle multiple tasks
• Thinking exhaustMap runs all tasks simultaneously
• Mixing switchMap behavior with mergeMap

2. Which of the following is the correct syntax to use concatMap in an Angular RxJS pipe?

easy

A. concatMap(source$, value => inner$)

B. source$.pipe(concatMap(value => inner$))

C. source$.concatMap(value => inner$)

D. source$.pipe(map(concatMap(value => inner$)))

Solution

1. Step 1: Recall RxJS pipe usage

   Operators like concatMap are used inside pipe() method on observables.

2. Step 2: Check syntax correctness

   source$.pipe(concatMap(value => inner$)) correctly uses source$.pipe(concatMap(...)). Options A and B misuse method chaining or function call. source$.pipe(map(concatMap(value => inner$))) wrongly nests concatMap inside map.

3. Final Answer:

   source$.pipe(concatMap(value => inner$)) -> Option B

4. Quick Check:

   Use pipe with concatMap inside [OK]

Hint: Always use pipe() with concatMap inside [OK]

Common Mistakes:

• Calling concatMap directly on observable without pipe
• Passing concatMap as argument to map
• Using concatMap as a standalone function

3. Given the code below, what will be the output order of emitted values?

import { of } from 'rxjs';
import { concatMap, delay } from 'rxjs/operators';

of(1, 2, 3).pipe(
  concatMap(x => of(x).pipe(delay(100 - x * 10)))
).subscribe(console.log);

medium

A. [3, 2, 1]

B. [1, 3, 2]

C. [1, 2, 3]

D. [2, 1, 3]

Solution

1. Step 1: Understand concatMap behavior with delays

   concatMap waits for each inner observable to complete before starting the next, preserving order.

2. Step 2: Analyze delays and emission order

   Even though delays differ (90ms, 80ms, 70ms), concatMap queues them and emits in source order: 1, then 2, then 3.

3. Final Answer:

   [1, 2, 3] -> Option C

4. Quick Check:

   concatMap preserves order despite delays [OK]

Hint: concatMap keeps order even if inner delays differ [OK]

Common Mistakes:

• Assuming output order matches delay times
• Confusing concatMap with mergeMap behavior
• Ignoring that concatMap queues inner observables

4. You have this code snippet using exhaustMap. It should ignore new clicks while processing, but it processes all clicks anyway. What is the likely mistake?

buttonClicks$.pipe(
  exhaustMap(() => fetchData())
).subscribe();

medium

A. fetchData() returns a promise, not an observable

B. Using exhaustMap instead of mergeMap

C. Not subscribing to the observable

D. Not returning an observable inside exhaustMap

Solution

1. Step 1: Check exhaustMap inner function return type

   exhaustMap expects the function to return an observable. If fetchData() returns a promise, it won't behave correctly.

2. Step 2: Understand effect of returning a promise

   Promises are not cancellable observables, so exhaustMap can't ignore new clicks properly, causing all clicks to process.

3. Final Answer:

   fetchData() returns a promise, not an observable -> Option A

4. Quick Check:

   exhaustMap needs observables, not promises [OK]

Hint: exhaustMap requires observables, not promises [OK]

Common Mistakes:

• Thinking exhaustMap works with promises automatically
• Forgetting to subscribe to the observable
• Confusing exhaustMap with mergeMap usage

5. You want to handle user search input so that if a search is running, new inputs are ignored until it finishes. Which operator should you use and why?

searchInput$.pipe(
  ???(query => performSearch(query))
).subscribe(results => display(results));

hard

A. exhaustMap because it ignores new searches while one is running

B. concatMap because it queues searches and runs them one by one

C. mergeMap because it runs all searches simultaneously

D. switchMap because it cancels previous searches on new input

Solution

1. Step 1: Understand the requirement

   The user wants to ignore new search inputs while a search is running, preventing duplicates.

2. Step 2: Match operator behavior

   exhaustMap ignores new inner observables if one is active, perfect for this use case. mergeMap runs all, concatMap queues, switchMap cancels previous.

3. Final Answer:

   exhaustMap because it ignores new searches while one is running -> Option A

4. Quick Check:

   Ignore new inputs during active task = exhaustMap [OK]

Hint: Ignore new tasks while running = exhaustMap [OK]

Common Mistakes:

• Choosing switchMap which cancels previous instead of ignoring
• Using mergeMap which runs all searches simultaneously
• Using concatMap which queues instead of ignoring