mergeMap vs concatMap vs exhaustMap in Angular - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

Behavior of mergeMap with overlapping inner observables

Given the following Angular component code using mergeMap, what will be the order of console logs when the button is clicked twice quickly?

Angular

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

@Component({
  selector: 'app-test',
  template: `<button (click)="clickHandler()">Click me</button>`
})
export class TestComponent implements OnInit, OnDestroy {
  private clicks = new Subject<void>();
  private destroy$ = new Subject<void>();

  ngOnInit() {
    this.clicks.pipe(
      mergeMap(() => of('inner').pipe(delay(1000))),
      takeUntil(this.destroy$)
    ).subscribe(value => console.log(value));
  }

  clickHandler() {
    console.log('clicked');
    this.clicks.next();
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

A clicked, clicked, inner, inner

B clicked, inner, clicked, inner

C inner, inner, clicked, clicked

D inner, clicked, inner, clicked

💡 Hint

Remember that mergeMap subscribes to all inner observables immediately and runs them concurrently.

When clicking twice quickly, mergeMap starts both inner observables without waiting. The synchronous console.log('clicked') runs twice immediately. Then after 1 second, both inner observables emit 'inner', so the logs show two 'clicked' first, then two 'inner'.

❓ component_behavior

intermediate

concatMap behavior with multiple rapid clicks

What will be the console output order when clicking the button three times quickly in this Angular component using concatMap?

Angular

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

@Component({
  selector: 'app-test',
  template: `<button (click)="clickHandler()">Click me</button>`
})
export class TestComponent implements OnInit, OnDestroy {
  private clicks = new Subject<void>();
  private destroy$ = new Subject<void>();

  ngOnInit() {
    this.clicks.pipe(
      concatMap(() => of('inner').pipe(delay(500))),
      takeUntil(this.destroy$)
    ).subscribe(value => console.log(value));
  }

  clickHandler() {
    console.log('clicked');
    this.clicks.next();
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

A inner, clicked, inner, clicked, inner, clicked

B clicked, clicked, clicked, inner, inner, inner

C clicked, inner, clicked, inner, clicked, inner

D clicked, inner, inner, inner, clicked, clicked

💡 Hint

concatMap queues inner observables and runs them one after another.

Each click logs 'clicked' immediately. The concatMap queues the inner observables and runs them sequentially. So after all clicks, the inner observables emit 'inner' one by one, resulting in three 'inner' logs after the three 'clicked' logs.

❓ component_behavior

advanced

exhaustMap behavior with rapid clicks

In this Angular component using exhaustMap, what will be the console output if the button is clicked three times quickly?

Angular

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

@Component({
  selector: 'app-test',
  template: `<button (click)="clickHandler()">Click me</button>`
})
export class TestComponent implements OnInit, OnDestroy {
  private clicks = new Subject<void>();
  private destroy$ = new Subject<void>();

  ngOnInit() {
    this.clicks.pipe(
      exhaustMap(() => of('inner').pipe(delay(700))),
      takeUntil(this.destroy$)
    ).subscribe(value => console.log(value));
  }

  clickHandler() {
    console.log('clicked');
    this.clicks.next();
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

A clicked, inner, clicked, inner, clicked, inner

B inner, clicked, clicked, clicked

C clicked, inner, inner, clicked, clicked

D clicked, clicked, clicked, inner

💡 Hint

exhaustMap ignores new inner observables while one is active.

On the first click, 'clicked' logs and the inner observable starts. Subsequent clicks log 'clicked' but their inner observables are ignored because exhaustMap ignores new inner observables until the current one completes. After 700ms, the single inner observable emits 'inner'.

📝 Syntax

advanced

Identify the incorrect usage of mergeMap, concatMap, or exhaustMap

Which option contains a syntax or usage error in applying mergeMap, concatMap, or exhaustMap in Angular?

A source$.pipe(exhaustMap(value => innerObservable(value)))

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

C source$.pipe(mergeMap(value => { innerObservable(value); }))

D source$.pipe(mergeMap(value => innerObservable(value)))

💡 Hint

Check if the arrow function returns the inner observable correctly.

Option C uses curly braces without a return statement, so the arrow function returns undefined instead of the inner observable. This causes a runtime error. Options B, C, and D correctly return the inner observable.

🔧 Debug

expert

Debugging unexpected behavior with concatMap and mergeMap

An Angular developer notices that when using concatMap in their code, inner observables run one after another, but when switching to mergeMap, all inner observables run at once. Which explanation best describes why this happens?

A <code>concatMap</code> queues inner observables and waits for each to complete before starting the next, while <code>mergeMap</code> subscribes to all inner observables immediately and runs them concurrently.

B <code>mergeMap</code> queues inner observables and waits for each to complete, while <code>concatMap</code> runs all inner observables concurrently.

C <code>concatMap</code> cancels previous inner observables when a new one starts, but <code>mergeMap</code> ignores new inner observables while one is active.

D <code>mergeMap</code> only runs the first inner observable and ignores the rest, while <code>concatMap</code> runs all inner observables concurrently.

💡 Hint

Think about how each operator handles multiple inner observables.

concatMap waits for each inner observable to finish before starting the next, ensuring sequential execution. mergeMap subscribes to all inner observables immediately, allowing them to run in parallel. This difference explains the observed behavior.