mergeMap vs concatMap vs exhaustMap in Angular - Hands-On Comparison

Understanding mergeMap vs concatMap vs exhaustMap in Angular

📖 Scenario: You are building a simple Angular component that listens to button clicks and makes simulated API calls. You want to learn how different RxJS operators mergeMap, concatMap, and exhaustMap handle multiple clicks differently.

🎯 Goal: Create an Angular standalone component that uses mergeMap, concatMap, and exhaustMap separately to handle button click events and simulate API calls. Observe how each operator manages multiple rapid clicks.

📋 What You'll Learn

Create a button click event observable

Set up a simulated API call function returning an observable with delay

Use mergeMap to handle clicks and show results

Use concatMap to handle clicks and show results

Use exhaustMap to handle clicks and show results

Display the emitted values in the template for each operator

💡 Why This Matters

🌍 Real World

Handling user events like button clicks or search inputs where multiple requests can happen quickly, and choosing the right RxJS operator controls how these requests are managed.

💼 Career

Understanding these operators is essential for Angular developers to manage asynchronous data streams effectively and avoid bugs like race conditions or unnecessary API calls.

1

Set up the Angular component and simulated API call

Create a standalone Angular component named MapOperatorsComponent. Inside it, create a method called fakeApiCall that takes a value string and returns an observable that emits `Response: ${value}` after a 1 second delay using of and delay from RxJS.

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Component({
  selector: 'app-map-operators',
  standalone: true,
  template: ``
})
export class MapOperatorsComponent {
  // Your code here
}

Need a hint?

Use of from RxJS to create an observable that emits a value. Use delay(1000) to simulate a 1 second wait.

2

Add a button click observable and a config variable

Add a public property clicks$ of type Subject<string> initialized as a new Subject. Also add a public property clickCount initialized to 0. This will track the number of clicks and emit values.

Angular

import { Component } from '@angular/core';
import { of, Subject } from 'rxjs';
import { delay } from 'rxjs/operators';

@Component({
  selector: 'app-map-operators',
  standalone: true,
  template: ``
})
export class MapOperatorsComponent {
  fakeApiCall(value: string) {
    return of(`Response: ${value}`).pipe(delay(1000));
  }

  // Add clicks$ as Subject and clickCount = 0
  // Your code here
}

Need a hint?

Import Subject from RxJS and create clicks$ as a new Subject of strings. Initialize clickCount to zero.

3

Use mergeMap to handle clicks and show results

Import mergeMap and tap from RxJS. Create a public property mergeMapResults$ that subscribes to clicks$ and uses mergeMap to call fakeApiCall with the emitted value. Use tap to log the response. Increment clickCount and emit `Click ${clickCount}` to clicks$ when a method onClickMergeMap() is called.

Angular

import { Component } from '@angular/core';
import { of, Subject } from 'rxjs';
import { delay, mergeMap, tap } from 'rxjs/operators';

@Component({
  selector: 'app-map-operators',
  standalone: true,
  template: ``
})
export class MapOperatorsComponent {
  fakeApiCall(value: string) {
    return of(`Response: ${value}`).pipe(delay(1000));
  }

  clicks$ = new Subject();
  clickCount = 0;

  // Use mergeMap on clicks$ and create onClickMergeMap method
  // Your code here
}

Need a hint?

Use mergeMap inside pipe on clicks$. Create a method onClickMergeMap that increments clickCount and emits a string to clicks$.

4

Add concatMap and exhaustMap handling with template buttons and display

Import concatMap and exhaustMap from RxJS. Create two new public properties concatMapResults$ and exhaustMapResults$ that use concatMap and exhaustMap respectively on clicks$ to call fakeApiCall. Add two methods onClickConcatMap() and onClickExhaustMap() that increment clickCount and emit `Click ${clickCount}` to clicks$. Update the component template to have three buttons labeled MergeMap, ConcatMap, and ExhaustMap that call their respective click methods. Below each button, display the latest emitted value from the corresponding observable using the async pipe.

Angular

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

@Component({
  selector: 'app-map-operators',
  standalone: true,
  template: `
    MergeMap
    MergeMap Result: {{ mergeMapResults$ | async }}

    ConcatMap
    ConcatMap Result: {{ concatMapResults$ | async }}

    ExhaustMap
    ExhaustMap Result: {{ exhaustMapResults$ | async }}
  `
})
export class MapOperatorsComponent {
  fakeApiCall(value: string) {
    return of(`Response: ${value}`).pipe(delay(1000));
  }

  clicks$ = new Subject();
  clickCount = 0;

  mergeMapResults$ = this.clicks$.pipe(
    mergeMap(value => this.fakeApiCall(value)),
    tap(response => {})
  );

  onClickMergeMap() {
    this.clickCount++;
    this.clicks$.next(`Click ${this.clickCount}`);
  }

  // Add concatMapResults$, exhaustMapResults$, onClickConcatMap(), onClickExhaustMap()
  // Your code here
}

Need a hint?

Use concatMap and exhaustMap similarly to mergeMap. Add buttons in the template that call the respective click methods. Display results with the async pipe.