Skip to content

Chapter 5 of 7

RxJS and HTTP

RxJS is the reactive extensions library for JavaScript that Angular relies on heavily for HTTP requests via HttpClient, reactive form value changes, router events, and event handling. At its core is the Observable, a lazy stream of data that does not execute until subscribed to and can emit multiple values over time, unlike a Promise which executes eagerly and resolves once. Observables are also cancellable via unsubscribe(). A Subject is both an Observable and an Observer that multicasts values to multiple subscribers. Common variants include BehaviorSubject which stores the latest value and emits it to new subscribers, ReplaySubject which replays a specified number of past emissions, and AsyncSubject which emits only the last value upon completion.

RxJS operators transform and combine streams. map transforms emitted values, filter filters emissions by condition, tap performs side effects without modifying the stream, and catchError handles errors in the stream. The flattening operators each serve a different concurrency need: switchMap maps each emission to an inner Observable and switches to the latest one, cancelling previous inner Observables, which is ideal for search-as-you-type; mergeMap maps to an inner Observable and subscribes concurrently, useful for parallel writes; concatMap queues inner Observables to run in order; exhaustMap ignores new emissions while one is in flight, useful for submit buttons to prevent double-clicks. Cold Observables create a new producer per subscription, like HttpClient.get(), while hot Observables share the same stream across subscribers, like fromEvent or Subject. shareReplay({ bufferSize: 1, refCount: true }) multicasts an Observable and replays the latest value to new subscribers, common for caching HTTP results.

HttpClient is the service in @angular/common/http for making HTTP requests, returning Observables and supporting get(), post(), put(), delete(), typed responses with generics, request and response headers, query parameters, and progress events. The observe option changes what is returned: 'body' (the default), 'response' for full HttpResponse with headers and status, or 'events' for HttpEvent including progress. The reportProgress option enables upload and download progress events, but only with XHR, not with withFetch(). HttpParams and HttpHeaders are immutable, so set() and append() return new instances that must be reassigned. Errors arrive as HttpErrorResponse, and you can handle them with the second argument to subscribe() or with catchError, accessing err.status, err.message, and err.error. Modern Angular uses provideHttpClient() with withFetch() and withInterceptors() instead of HttpClientModule and the HTTP_INTERCEPTORS multi-token; interceptors are now simple functions that use inject() to access dependencies. takeUntilDestroyed() from @angular/core/rxjs-interop automatically completes an Observable when the host directive or component is destroyed, while DestroyRef provides a generic mechanism for registering cleanup callbacks.

All chapters
  1. 1Angular Foundations
  2. 2Templates, Directives, and Pipes
  3. 3Routing and Navigation
  4. 4Reactive Forms
  5. 5RxJS and HTTP
  6. 6Modern Angular: Signals, Standalone, and Control Flow
  7. 7Dependency Injection, Change Detection, and Tooling

Drill it

Reading is not remembering. These come from the Angular Framework deck:

Q

What is Angular?

Angular is a TypeScript-based front-end framework developed by Google for building dynamic, single-page applications (SPAs). It provides a comprehensive solutio...

Q

What is an Angular component?

A component is the fundamental building block of an Angular application. It consists of:A TypeScript class decorated with @Component()An HTML templateOptional C...

Q

What is the purpose of the @Component decorator?

The @Component() decorator marks a class as an Angular component and provides metadata that tells Angular how to process, instantiate, and use the component at...

Q

What is data binding in Angular?

Data binding is a mechanism that connects the component class to the template. Angular supports four forms:Interpolation: {{ expression }}Property binding: [pro...