switchMap for flattening in Angular - Step-by-Step Execution

Concept Flow - switchMap for flattening

Outer Observable emits value

↓

switchMap receives value

↓

Cancel previous inner Observable if active

↓

Subscribe to new inner Observable

↓

Inner Observable emits values

↓

Emit inner values downstream

↓

Repeat on next outer emission

switchMap listens to an outer Observable, cancels any previous inner Observable, and switches to a new inner Observable, flattening the emissions.

Execution Sample

Angular

outer$.pipe(
  switchMap(value => inner$(value))
).subscribe(result => console.log(result));

This code listens to outer$, switches to a new inner$ Observable for each outer value, and logs inner emissions.

Execution Table

Step	Outer Observable Emission	Action by switchMap	Inner Observable Subscribed	Inner Emission	Output Emitted
1	A	Subscribe to inner$(A)	inner$(A)	1	1
2		inner$(A) emits 2	inner$(A)	2	2
3	B	Cancel inner$(A), subscribe inner$(B)	inner$(B)
4		inner$(B) emits 10	inner$(B)	10	10
5		inner$(B) emits 20	inner$(B)	20	20
6	C	Cancel inner$(B), subscribe inner$(C)	inner$(C)
7		inner$(C) emits 100	inner$(C)	100	100
8		inner$(C) completes	inner$(C)
9		outer$ completes

💡 outer$ completes and all inner Observables have completed or been cancelled

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 6	Final
Current Inner Observable	none	inner$(A)	inner$(B)	inner$(C)	none
Output Emitted	none	1	1,2	1,2,10,20	1,2,10,20,100

Key Moments - 2 Insights

Why does switchMap cancel the previous inner Observable when a new outer value arrives?

Because switchMap only cares about the latest outer emission, it cancels the previous inner Observable to avoid emitting outdated values, as shown in steps 3 and 6 where previous inner Observables are cancelled.

What happens to inner Observable emissions after switchMap switches to a new inner Observable?

Emissions from the old inner Observable stop being emitted downstream because it was cancelled; only the new inner Observable's emissions are forwarded, as seen in step 3 cancelling inner$(A) and step 6 cancelling inner$(B).

Visual Quiz - 3 Questions

Look at the execution table, what is the output emitted at step 4?

A 2

B 10

C 20

D 100

💡 Hint

Check the 'Output Emitted' column at step 4 in the execution_table.

At which step does switchMap cancel the inner Observable subscribed to inner$(A)?

A Step 3

B Step 5

C Step 2

D Step 6

💡 Hint

Look for the step where the action mentions cancelling inner$(A) in the execution_table.

If the outer Observable emitted a new value after step 8, what would switchMap do?

A Emit the last inner Observable's last value again

B Subscribe to a new inner Observable and cancel any previous one

C Ignore the new value because outer$ completed

D Throw an error

💡 Hint

Recall switchMap behavior from the concept_flow and how it reacts to new outer emissions.

Concept Snapshot

switchMap listens to an outer Observable.
When a new outer value arrives, it cancels the previous inner Observable.
It subscribes to a new inner Observable created from the outer value.
Only emissions from the latest inner Observable are forwarded.
Useful for flattening and switching streams dynamically.

Full Transcript

switchMap is an operator in Angular that listens to an outer Observable. When the outer Observable emits a value, switchMap cancels any previous inner Observable it was subscribed to and subscribes to a new inner Observable created from the latest outer value. This means only the latest inner Observable's emissions are passed downstream. For example, if the outer Observable emits values A, B, and C, switchMap will subscribe to inner$(A), then cancel it when B arrives and subscribe to inner$(B), then cancel inner$(B) when C arrives and subscribe to inner$(C). This behavior helps avoid outdated data and keeps the stream focused on the latest information.