Angular: The Interactive Journey Angular Intermediate

RxJS: cold observables and the async pipe

Events as first-class values

RxJS treats streams of values (HTTP responses, user input, router events) as first-class Observables you can compose with operators. Most HTTP observables are cold: subscribing triggers the request, completing it ends the observable. Angular's async pipe subscribes and unsubscribes for you in the template, removing a whole class of memory leaks.

invoices$ = this.api.list().pipe(
  shareReplay({ bufferSize: 1, refCount: true }),
  catchError(err => { this.toast.error('Could not load'); return of([]); }),
);

// in the template:
// <li *ngFor="let inv of invoices$ | async">…</li>

Takeaways

  • HTTP observables are cold; async subscribes/unsubscribes safely.
  • shareReplay multicasts an expensive source to multiple subscribers.
  • catchError keeps a stream alive after failures — it never just disappears.

Enjoying This Lesson?

Your support helps create more comprehensive courses and lessons like this one. Help me build better learning experiences for everyone.

Support Awashyak