Angular RxJS (Angular 21+)

RxJS patterns for modern zoneless Angular. Assumes Angular 21+: standalone components, zoneless change detection, signals as the template-facing primitive, Vitest as the default test runner.

When to Use

• Consuming Observables in components (template data, derived state, side effects)
• Typeahead/autocomplete, debounced inputs, dependent or parallel HttpClient calls
• Bridging RxJS ↔ signals (toSignal, toObservable) or choosing resource APIs vs. classic streams
• A stream "stops working" after the first error, or QA reports leaks/duplicate requests
• Unit-testing time-based or HTTP-driven RxJS code in a zoneless + Vitest project

When NOT to use: choosing a state-management approach or store design → angular-state. DI, DestroyRef, provider fundamentals → angular-fundamentals. Framework-agnostic RxJS in non-Angular TypeScript → the rxjs skill.

The Iron Rule: A Stream That Reaches the Template Must Survive Errors

An unhandled error permanently terminates an Observable pipeline. In a typeahead, a single failed HTTP call kills the stream: the input keeps firing, nothing ever updates again, no console hint in production. This is the most common omission in otherwise-correct Angular RxJS code.

Every pipeline consumed via toSignal, async pipe, or subscribe needs error handling — and catchError goes on the inner observable, inside the mapping operator, so the outer stream survives: