RxJS Operators You Actually Need (map, filter, switchMap)

RxJS operators help you transform and control data streams. ## map: transform values ```ts import { of, map } from 'rxjs'; of(2, 3, 4).pipe( map(x => x * 10) ).subscribe(console.log); // 20, 30, 40 ``` ## filter: keep only what matches ```ts import { of, filter } from 'rxjs'; of(1, 2, 3, 4).pipe( filter(x => x % 2 === 0) ).subscribe(console.log); // 2, 4 ``` ## switchMap: best for “dependent requests” Example: user changes selected ID, you fetch details. `switchMap` cancels old requests automatically. ```ts import { Subject, switchMap } from 'rxjs'; const selectedId$ = new Subject<number>(); selectedId$.pipe( switchMap(id => this.http.get(`/api/users/${id}`)) ).subscribe(user => console.log(user)); ``` ## Visual: why switchMap is useful ```mermaid flowchart LR A[User selects ID 1] --> B[Request 1 starts] A2[User selects ID 2 quickly] --> C[Request 2 starts] C --> D[Request 1 canceled] ``` > Next: Content projection (ng-content), build reusable layouts.