switchMap for flattening in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the operator used for flattening inner observables.

Angular

import { [1] } from 'rxjs/operators';

Drag options to blanks, or click blank then click option'

AswitchMap

Bmap

Cfilter

Dtap

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'map' instead of 'switchMap'.

Forgetting to import from 'rxjs/operators'.

The switchMap operator is imported from rxjs/operators to flatten inner observables.

2fill in blank

medium

Complete the code to use switchMap to flatten the inner observable returned by getData().

Angular

this.data$ = this.input$.pipe([1](value => this.getData(value)));

Drag options to blanks, or click blank then click option'

Amap

Bfilter

CswitchMap

Dtap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'map' which does not flatten observables.

Using 'filter' which filters values but does not flatten.

switchMap is used here to switch to the observable returned by getData(value) and flatten it.

3fill in blank

hard

Fix the error in the code by replacing the incorrect operator with switchMap to flatten the inner observable.

Angular

this.result$ = this.source$.pipe([1](val => this.fetchDetails(val)));

Drag options to blanks, or click blank then click option'

Atap

Bfilter

Cmap

DswitchMap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'map' which returns nested observables.

Using 'filter' which does not transform observables.

switchMap is the correct operator to flatten the inner observable returned by fetchDetails(val).

4fill in blank

hard

Fill both blanks to create an observable that uses switchMap to flatten and then map to transform the data.

Angular

this.final$ = this.input$.pipe([1](val => this.apiCall(val)), [2](data => data.result));

Drag options to blanks, or click blank then click option'

AswitchMap

Bfilter

Cmap

Dtap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'map' instead of 'switchMap' first, causing nested observables.

Using 'filter' instead of 'map' for transformation.

First, switchMap flattens the inner observable from apiCall. Then, map transforms the emitted data to data.result.

5fill in blank

hard

Fill all three blanks to create a pipeline that filters input, flattens with switchMap, and taps to log the result.

Angular

this.process$ = this.source$.pipe([1](val => val > 10), [2](val => this.loadData(val)), [3](res => console.log(res)));

Drag options to blanks, or click blank then click option'

Afilter

BswitchMap

Ctap

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'map' instead of 'filter' for the first step.

Using 'map' instead of 'switchMap' for flattening.

Using 'map' instead of 'tap' for logging.

The pipeline first filters values greater than 10, then uses switchMap to flatten the observable from loadData, and finally uses tap to log the results without affecting the stream.

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