Angular RxJS Operators
⏱️ ~6-minute bite · solve the sandbox to master
5-Year-Old Metaphor
— The physical, real-world picture. No jargon.🚦 The flattening operators all do the same thing — take an outer observable and map each value to an inner observable — but they differ in how they handle overlap.
🔀 switchMap
Last request wins
Search autocomplete — old results thrown out when you keep typing. Stale responses are irrelevant.
🛑 exhaustMap
First click wins
Submit button — clicking 5 times only fires once. Duplicate is worse than stale.
📋 concatMap
Take a number
Serial uploads — each waits its turn. Order and completeness both matter.
🔀 mergeMap
Open all counters
Parallel requests — all go at once, results arrive as they complete.
🔀 combineLatest
All lanes merge
Multi-source dashboard — only emit when all sources have data, react when any changes.
Interactive Sandbox
— Move something, see it react instantly.Operator
Last request wins — cancels previous inner observable
🧠 Last request wins: search autocomplete — old results thrown out when you keep typing.
Emission simulator — click emit to fire the outer observable
Click “Emit!” to simulate outer observable emissions
When to use
When new outer values make previous inner observables stale. Search autocomplete: only the latest search result matters. Route params: only the current route data matters.
| 1 | import { Component, OnInit } from '@angular/core'; |
| 2 | import { FormControl, ReactiveFormsModule } from '@angular/forms'; |
| 3 | import { switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators'; |
| 4 | import { HttpClient } from '@angular/common/http'; |
| 5 | |
| 6 | @Component({ |
| 7 | standalone: true, |
| 8 | imports: [ReactiveFormsModule], |
| 9 | template: `<input [formControl]="searchCtrl" placeholder="Search..." />`, |
| 10 | }) |
| 11 | export class SearchComponent implements OnInit { |
| 12 | searchCtrl = new FormControl(''); |
| 13 | results: string[] = []; |
| 14 | |
| 15 | constructor(private http: HttpClient) {} |
| 16 | |
| 17 | ngOnInit() { |
| 18 | this.searchCtrl.valueChanges.pipe( |
| 19 | debounceTime(300), |
| 20 | distinctUntilChanged(), |
| 21 | // switchMap: when a new value arrives, CANCEL the previous HTTP call |
| 22 | // The old XHR is aborted — no stale results overwriting newer ones |
| 23 | switchMap((query) => this.http.get<string[]>(`/api/search?q=${query}`)), |
| 24 | ).subscribe((results) => { |
| 25 | this.results = results; |
| 26 | }); |
| 27 | } |
| 28 | } |
| 29 | |
| 30 | // ── Route params (Angular Router pattern) ───────────────────── |
| 31 | import { ActivatedRoute } from '@angular/router'; |
| 32 | |
| 33 | @Component({ template: '' }) |
| 34 | export class ArticleComponent implements OnInit { |
| 35 | constructor(private route: ActivatedRoute, private http: HttpClient) {} |
| 36 | |
| 37 | ngOnInit() { |
| 38 | this.route.paramMap.pipe( |
| 39 | switchMap((params) => { |
| 40 | const id = params.get('id'); |
| 41 | // Navigating to a new article cancels the old article's HTTP request |
| 42 | return this.http.get(`/api/articles/${id}`); |
| 43 | }), |
| 44 | ).subscribe((article) => { /* render */ }); |
| 45 | } |
| 46 | } |
Challenge
Explore all 5 RxJS operators. Use the emit simulator to see how each handles rapid emissions.
Why Should I Care?
— The exact interview question + the bug it kills.Interview questions
Q: When should you use switchMap vs exhaustMap?
switchMap for search (stale results are bad — keep only the latest). exhaustMap for submit (duplicates are bad — ignore clicks while processing). The mental model: switchMap = “last request wins”, exhaustMap = “first click wins, ignore the rest until done”.
Q: What's the memory leak risk with mergeMap?
mergeMap has no concurrency limit by default — if the source emits 100 values, mergeMap creates 100 simultaneous inner subscriptions. Each subscription holds memory until it completes. Always use takeUntilDestroyed() to cap the subscription lifetime, and consider the concurrency parameter mergeMap(fn, N) to limit simultaneous inner subscriptions.
Q: Why is combineLatest useful with form controls?
Multi-field validation requires knowing the current state of ALL fields simultaneously. combineLatest emits whenever any field changes and provides the latest value from every field. This lets you write validation logic that considers all fields together — checking that password and confirmPassword match, or that email is valid before enabling the submit button.
The Deep Dive
— Spec refs, engine internals, the minutiae.takeUntilDestroyed — the modern cleanup pattern
Angular 16+ ships takeUntilDestroyed() in @angular/core/rxjs-interop. It automatically unsubscribes when the component is destroyed — no more Subject + takeUntil + ngOnDestroy ceremony.
| 1 | import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
| 2 | |
| 3 | @Component({ standalone: true, template: '' }) |
| 4 | export class MyComponent { |
| 5 | private destroyRef = inject(DestroyRef); |
| 6 | |
| 7 | ngOnInit() { |
| 8 | this.someService.data$.pipe( |
| 9 | switchMap((query) => this.http.get(`/api/search?q=${query}`)), |
| 10 | takeUntilDestroyed(this.destroyRef), // auto-unsubscribe on destroy |
| 11 | ).subscribe((results) => { /* ... */ }); |
| 12 | } |
| 13 | } |
| 14 | |
| 15 | // Even simpler — inject DestroyRef implicitly in the injection context: |
| 16 | export class CleanComponent { |
| 17 | constructor() { |
| 18 | interval(1000).pipe( |
| 19 | takeUntilDestroyed(), // no argument — uses current injection context |
| 20 | ).subscribe(console.log); |
| 21 | } |
| 22 | } |
Hot vs cold observables
Cold observables start producing when subscribed — each subscriber gets its own execution (HTTP calls are cold: each subscribe = new XHR). Hot observables produce regardless of subscribers — events, Subjects, WebSockets. Understanding this matters for sharing: two components subscribing to http.get() each fire a separate HTTP request. Use shareReplay(1) to multicast.
| 1 | // Without shareReplay — 2 HTTP requests if 2 components subscribe |
| 2 | const user$ = this.http.get('/api/me'); |
| 3 | |
| 4 | // With shareReplay(1) — 1 HTTP request, result shared + replayed |
| 5 | const user$ = this.http.get('/api/me').pipe( |
| 6 | shareReplay(1), // cache latest value, replay to new subscribers |
| 7 | ); |
catchError + EMPTY — graceful error handling
| 1 | import { catchError, EMPTY, of } from 'rxjs'; |
| 2 | |
| 3 | // catchError swallows the error and returns a fallback observable |
| 4 | // EMPTY completes without emitting — the stream continues |
| 5 | this.search$.pipe( |
| 6 | switchMap((query) => |
| 7 | this.http.get(`/api/search?q=${query}`).pipe( |
| 8 | catchError((err) => { |
| 9 | console.error('Search failed:', err); |
| 10 | return EMPTY; // swallow error, don't kill the outer stream |
| 11 | // OR: return of([]); // emit empty results |
| 12 | }), |
| 13 | ), |
| 14 | ), |
| 15 | ).subscribe((results) => { /* ... */ }); |
| 16 | |
| 17 | // Without inner catchError: one HTTP error kills the entire subscription |
| 18 | // and search stops working for the rest of the session |
Interview Questions
— Real questions from real interviews — with answers.switchMap = last wins (search autocomplete); exhaustMap = first wins (form submit).
mergeMap has no concurrency limit by default — N rapid emissions = N simultaneous subscriptions.
combineLatest doesn't emit until ALL source observables have emitted at least once. Use startWith() to seed each source.
Cold: each subscriber gets its own execution (HTTP = new XHR per subscribe). Hot: shared execution regardless of subscribers.
Catch inside the inner observable so errors are contained; the outer subscription survives.
Replaces the Subject + takeUntil + ngOnDestroy pattern — automatically unsubscribes when the injection context is destroyed.
Memory Game
— Quick quiz — lock the concept in long-term memory.What does shareReplay(1) do that share() does not?