switchMap for flattening in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Angular component output when clicking the button twice quickly?

Consider this Angular component using switchMap to handle button clicks:

import { Component } from '@angular/core';
import { Subject, of } from 'rxjs';
import { delay, switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-switchmap-demo',
  template: `
    
    
{{message}}
  `
})
export class SwitchMapDemoComponent {
  clicks = new Subject();
  message = '';

  constructor() {
    this.clicks.pipe(
      switchMap(() => of('Response').pipe(delay(1000)))
    ).subscribe(res => this.message = res);
  }
}

What will the message show after clicking the button twice quickly (within less than 1 second)?

Angular

import { Component } from '@angular/core';
import { Subject, of } from 'rxjs';
import { delay, switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-switchmap-demo',
  template: `
    <button (click)="clicks.next()">Click me</button>
    <p>{{message}}</p>
  `
})
export class SwitchMapDemoComponent {
  clicks = new Subject<void>();
  message = '';

  constructor() {
    this.clicks.pipe(
      switchMap(() => of('Response').pipe(delay(1000)))
    ).subscribe(res => this.message = res);
  }
}

A The message updates once after 1 second with 'Response'.

B The message updates twice, once per click, each after 1 second.

C The message never updates because the second click cancels the first.

D The message updates immediately with 'Response' on each click.

💡 Hint

Think about how switchMap cancels previous inner observables when a new one starts.

switchMap cancels the previous inner observable when a new value arrives. Clicking twice quickly starts two inner observables, but the first is canceled before it emits. Only the last inner observable completes and updates the message once after 1 second.

📝 Syntax

intermediate

Which option correctly uses switchMap to flatten HTTP requests in Angular?

You want to use switchMap to flatten a user ID stream into HTTP requests fetching user details. Which code snippet is correct?

A userId$.pipe(switchMap(id => this.http.get(`/api/users/${id}`)))

B userId$.pipe(switchMap(id => this.http.get(`/api/users/${id}`)))()

C userId$.pipe(switchMap(id => this.http.get(`/api/users/${id}`)).subscribe())

D userId$.pipe(switchMap(id => this.http.get(`/api/users/${id}`)).toPromise())

💡 Hint

Remember that switchMap expects a function returning an observable.

Option A correctly returns an observable inside switchMap. Option A incorrectly calls subscribe() inside the pipe, which is invalid. Option A tries to call the result as a function, causing an error. Option A calls toPromise() inside the pipe, which is not valid RxJS usage.

🔧 Debug

advanced

Why does this switchMap code never emit values?

Look at this Angular code snippet:

this.source$.pipe(
  switchMap(() => {
    // Missing return statement
    of('Hello');
  })
).subscribe(console.log);

Why does it never print anything?

Angular

this.source$.pipe(
  switchMap(() => {
    // Missing return statement
    of('Hello');
  })
).subscribe(console.log);

A Because switchMap requires a promise, not an observable.

B Because the inner function does not return the observable, so switchMap receives undefined.

C Because of('Hello') is not a valid observable.

D Because subscribe is missing a next handler.

💡 Hint

Check if the function inside switchMap returns anything.

The function inside switchMap must return an observable. Here, of('Hello') is created but not returned, so switchMap gets undefined and never emits.

❓ state_output

advanced

What is the final value of data after this switchMap chain?

Given this Angular RxJS code:

let data = '';

const clicks = new Subject();

clicks.pipe(
  switchMap(id => of(`User${id}`).pipe(delay(500)))
).subscribe(value => data = value);

clicks.next(1);
setTimeout(() => clicks.next(2), 200);
setTimeout(() => clicks.next(3), 800);
setTimeout(() => console.log(data), 1500);

What will be logged to the console?

Angular

let data = '';

const clicks = new Subject<number>();

clicks.pipe(
  switchMap(id => of(`User${id}`).pipe(delay(500)))
).subscribe(value => data = value);

clicks.next(1);
setTimeout(() => clicks.next(2), 200);
setTimeout(() => clicks.next(3), 800);
setTimeout(() => console.log(data), 1500);

A 'User2'

B 'User1'

C 'User3'

D '' (empty string)

💡 Hint

Remember that switchMap cancels previous inner observables when a new value arrives.

Click 1 starts an inner observable delayed 500ms. At 200ms, click 2 starts a new inner observable, canceling the first. At 800ms, click 3 starts another inner observable, canceling the second. The last inner observable emits at 1300ms (800 + 500). So at 1500ms, data is 'User3'.

🧠 Conceptual

expert

Why is switchMap preferred over mergeMap for flattening HTTP requests in Angular forms?

In Angular reactive forms, when reacting to user input to fetch data, why is switchMap often preferred over mergeMap?

A Because mergeMap only allows one inner observable at a time.

B Because switchMap queues all requests and emits results in order.

C Because mergeMap cancels previous requests automatically.

D Because switchMap cancels previous HTTP requests, preventing outdated data from arriving.

💡 Hint

Think about what happens if the user types quickly and multiple HTTP requests start.

switchMap cancels previous inner observables when a new one starts, so only the latest HTTP request result is used. This avoids showing outdated data if earlier requests finish after later ones. mergeMap runs all requests concurrently and emits all results, which can cause race conditions.