Roadmap › Angular (2 → 21) › Module: Services, DI and HTTP
Lessons in this course (16)
8. RxJS essentials
Intermediate★ Must knowLesson 8 of 16
ts
search = new FormControl("");
results$ = this.search.valueChanges.pipe(
debounceTime(300),
map(v => v?.trim() ?? ""),
distinctUntilChanged(),
filter(term => term.length >= 2),
switchMap(term => this.api.search(term).pipe(catchError(() => of([])))), // cancels the previous request
shareReplay({ bufferSize: 1, refCount: true }),
);| Operator | Use |
|---|---|
map, filter, tap | Transform, filter, side effects |
switchMap | Switch to a new inner observable, cancel the previous (search, route params) |
mergeMap | Run inner observables concurrently (fire-and-forget saves) |
concatMap | Run in order, one at a time (queue of writes) |
exhaustMap | Ignore new values while busy (login button double-click) |
combineLatest, forkJoin, zip, withLatestFrom | Combine streams (forkJoin = like Promise.all, completes once) |
debounceTime, throttleTime, distinctUntilChanged | Rate control |
catchError, retry | Error handling |
takeUntil, takeUntilDestroyed, take(1), first | Completion/unsubscription |
shareReplay | Multicast and cache the last value |
Subjects: Subject (no initial value), BehaviorSubject (has current value — simple state), ReplaySubject(n), AsyncSubject. Cold observables start per subscriber (HTTP); hot share one source (DOM events, Subjects).
Unsubscribing: the async pipe, takeUntilDestroyed(), toSignal() — avoid manual subscriptions that leak.