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

Need a 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

Need a 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

Need a 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

Need a hint?

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