switchMap for flattening in Angular - Mini Project: Build & Apply

Using switchMap to Flatten Observables in Angular

📖 Scenario: You are building a simple Angular component that fetches user details based on a user ID input. The user ID changes dynamically, and you want to fetch the latest user data without overlapping previous requests.

🎯 Goal: Create an Angular component that uses switchMap to flatten the observable streams when fetching user data based on changing user IDs.

📋 What You'll Learn

Create an observable of user IDs

Create a service method that returns an observable of user data for a given ID

Use switchMap to switch to the latest user data observable when the user ID changes

Subscribe to the flattened observable and store the user data in a component property

💡 Why This Matters

🌍 Real World

This pattern is common in Angular apps where user input or route parameters change and you want to fetch fresh data without overlapping requests.

💼 Career

Understanding switchMap is essential for reactive programming in Angular, improving app performance and user experience by managing observable streams efficiently.

1

Set up the user ID observable

Create a variable called userId$ as a new BehaviorSubject with the initial value 1.

Angular

# Your code here

Hint

Use new BehaviorSubject(1) to create an observable that starts with 1.

2

Add the user data fetching method

Create a method called getUserData that takes a parameter id and returns an observable of user data using of from rxjs. Return an object with id and name as `User ${id}`.

Angular

import { BehaviorSubject, of } from 'rxjs';

userId$ = new BehaviorSubject(1);

// Your code here

Hint

Use of to create an observable that emits the user object.

3

Use switchMap to flatten the user data observable

Create a variable called userData$ that uses userId$.pipe() with switchMap to call getUserData with the emitted id.

Angular

import { BehaviorSubject, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

userId$ = new BehaviorSubject(1);

getUserData(id: number) {
  return of({ id, name: `User ${id}` });
}

// Your code here

Hint

Use switchMap inside pipe() to switch to the latest user data observable.

4

Subscribe to userData$ and store the result

Subscribe to userData$ and assign the emitted value to a component property called user.

Angular

import { BehaviorSubject, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

userId$ = new BehaviorSubject(1);

getUserData(id: number) {
  return of({ id, name: `User ${id}` });
}

userData$ = this.userId$.pipe(
  switchMap(id => this.getUserData(id))
);

// Your code here

Hint

Subscribe to userData$ and update the user property inside the subscription.

Practice

1. What is the main purpose of switchMap in Angular RxJS?

easy

A. To combine multiple observables into one without canceling

B. To switch to the latest inner observable and cancel previous ones

C. To delay the emission of values by a fixed time

D. To filter values based on a condition

Solution

1. Step 1: Understand the behavior of switchMap

   switchMap listens to an outer observable and switches to a new inner observable each time the outer emits, canceling the previous inner observable.

2. Step 2: Compare with other operators

   Unlike operators that combine or delay, switchMap cancels previous inner observables to avoid outdated data.

3. Final Answer:

   To switch to the latest inner observable and cancel previous ones -> Option B

4. Quick Check:

   switchMap = switch to latest and cancel old [OK]

Hint: Remember: switchMap cancels old streams, keeps newest only [OK]

Common Mistakes:

• Confusing switchMap with mergeMap which merges all observables
• Thinking switchMap delays values instead of switching
• Assuming switchMap filters values directly

2. Which of the following is the correct syntax to use switchMap in an Angular service?

easy

A. observable$.pipe(switchMap(value => http.get(url)))

B. observable$.switchMap(value => http.get(url))

C. switchMap(observable$, value => http.get(url))

D. observable$.map(switchMap(value => http.get(url)))

Solution

1. Step 1: Recall RxJS pipe syntax

   In Angular, operators like switchMap are used inside the pipe() method on observables.

2. Step 2: Check each option

   observable$.pipe(switchMap(value => http.get(url))) correctly uses observable$.pipe(switchMap(...)). observable$.switchMap(value => http.get(url)) is invalid because switchMap is not a method on observable directly. switchMap(observable$, value => http.get(url)) has wrong argument order. observable$.map(switchMap(value => http.get(url))) misuses map.

3. Final Answer:

   observable$.pipe(switchMap(value => http.get(url))) -> Option A

4. Quick Check:

   Use pipe() with switchMap inside [OK]

Hint: Use pipe() to chain switchMap, not direct method call [OK]

Common Mistakes:

• Calling switchMap directly on observable without pipe
• Mixing switchMap with map incorrectly
• Passing wrong arguments to switchMap

3. Given the code below, what will be logged to the console?

const source$ = of('A', 'B', 'C');
source$.pipe(
  switchMap(letter => of(letter + '1', letter + '2'))
).subscribe(console.log);

medium

A. "C1" and "C2" only

B. ["A1", "A2", "B1", "B2", "C1", "C2"]

C. "A1" and "A2" only

D. Error: switchMap requires an observable

Solution

1. Step 1: Understand source observable emissions

   The source$ emits 'A', then 'B', then 'C' synchronously.

2. Step 2: Apply switchMap to each emission

   For each letter, switchMap maps to an observable emitting letter+'1' and letter+'2'. Since source$ emits synchronously, switchMap cancels previous inner observables when a new outer emission occurs, so only the last inner observable's values "C1" and "C2" are emitted.

3. Step 3: Resulting output

   Only "C1" and "C2" are logged to the console.

4. Final Answer:

   "C1" and "C2" only -> Option A

5. Quick Check:

   switchMap cancels previous inner observables, so only last inner observable outputs [OK]

Hint: switchMap cancels previous inner observables, outputs only latest inner values [OK]

Common Mistakes:

• Thinking switchMap flattens all inner observables in order
• Expecting all inner observable outputs
• Confusing switchMap with mergeMap behavior

4. Identify the error in this Angular RxJS code using switchMap:

this.searchTerm$.switchMap(term => this.http.get(`/api/search?q=${term}`))
  .subscribe(results => this.results = results);

medium

A. subscribe callback syntax is incorrect

B. http.get should be replaced with http.post

C. switchMap is used without pipe()

D. searchTerm$ should be a Subject, not Observable

Solution

1. Step 1: Check usage of switchMap

   In Angular RxJS, operators like switchMap must be used inside the pipe() method, not called directly on the observable.

2. Step 2: Verify other parts

   http.get usage is valid for GET requests. subscribe callback syntax is correct. searchTerm$ can be any observable.

3. Final Answer:

   switchMap is used without pipe() -> Option C

4. Quick Check:

   Operators need pipe() to work [OK]

Hint: Always use pipe() to apply switchMap on observables [OK]

Common Mistakes:

• Calling switchMap directly on observable
• Confusing http.get with http.post
• Miswriting subscribe callback

5. You want to implement a live search input in Angular that cancels previous HTTP requests when the user types fast. Which RxJS operator should you use and why? searchTerm$.pipe( /* what operator here? */ )

hard

A. mergeMap, because it merges all requests and shows all results

B. exhaustMap, because it ignores new requests while one is active

C. concatMap, because it queues requests and processes them one by one

D. switchMap, because it cancels previous requests and uses only the latest

Solution

1. Step 1: Understand live search requirements

   Live search needs to cancel previous HTTP requests if the user types again quickly to avoid outdated results.

2. Step 2: Match operator behavior

   switchMap cancels previous inner observables (HTTP requests) and switches to the latest, perfect for live search. mergeMap merges all requests, concatMap queues them, exhaustMap ignores new while active.

3. Final Answer:

   switchMap, because it cancels previous requests and uses only the latest -> Option D

4. Quick Check:

   Live search = switchMap cancels old requests [OK]

Hint: Use switchMap to cancel old HTTP calls on new input [OK]

Common Mistakes:

• Using mergeMap causing multiple overlapping requests
• Using concatMap causing delayed responses
• Using exhaustMap ignoring new inputs