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

RxJS operators help you transform and control data streams.

map: transform values

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

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.

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

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.