Angular RxJS Cheat Sheet

Covers core RxJS concepts, common operators, Angular HttpClient integration, the async pipe, subscription cleanup, and the different Subject types.

3 PagesAdvancedFeb 25, 2026

Core RxJS Concepts

Vocabulary underpinning every Angular data stream.

Observable- Lazy, push-based stream of values over time; does nothing until subscribed
Observer- Object with next/error/complete callbacks passed to subscribe()
Subscription- Represents an active execution; call .unsubscribe() to stop and free resources
Operator- Pure function that transforms an Observable into a new one, composed via .pipe()
Subject- Both an Observable and an Observer; multicasts values to many subscribers
Cold vs hot- Cold sources start producing per subscriber (e.g. HTTP); hot sources share one execution

Common Operators

A typical search-as-you-type pipeline.

typescript

import { fromEvent } from 'rxjs';import { map, filter, debounceTime, switchMap } from 'rxjs/operators';fromEvent(input, 'input').pipe(  debounceTime(300),                      // wait for 300ms of silence  map(e => (e.target as HTMLInputElement).value),  filter(text => text.length > 2),        // ignore short queries  switchMap(query => this.searchService.search(query)) // cancel the prior request).subscribe(results => this.results = results);

Angular HttpClient with RxJS

Retry and gracefully degrade a failed request.

typescript

import { HttpClient } from '@angular/common/http';import { catchError, retry } from 'rxjs/operators';import { of } from 'rxjs';@Injectable({ providedIn: 'root' })export class UserService {  constructor(private http: HttpClient) {}  getUser(id: number) {    return this.http.get<User>(`/api/users/${id}`).pipe(      retry(2),      catchError(err => {        console.error('Failed to load user', err);        return of(null); // fallback value instead of throwing      })    );  }}

async Pipe & Subscription Cleanup

Two valid ways to avoid leaking subscriptions.

typescript

// Component: manual subscription with takeUntil cleanupexport class UserListComponent implements OnDestroy {  private destroy$ = new Subject<void>();  users: User[] = [];  constructor(private userService: UserService) {    this.userService.getUsers().pipe(      takeUntil(this.destroy$)    ).subscribe(users => this.users = users);  }  ngOnDestroy() {    this.destroy$.next();    this.destroy$.complete();  }}// Template: async pipe subscribes AND unsubscribes automatically// <ul><li *ngFor="let user of users$ | async">{{ user.name }}</li></ul>

Subject Types

Choosing the right multicast primitive.

Subject- No initial value, no replay; late subscribers miss past emissions
BehaviorSubject- Requires an initial value; always replays the current/last value to new subscribers
ReplaySubject- Replays a configurable number of past emissions (or time window) to new subscribers
AsyncSubject- Only emits the final value, and only after the source completes
share() operator- Converts a cold Observable into one that multicasts via an internal Subject, without creating one manually

Pro Tip

Prefer the async pipe over manual .subscribe() in components whenever the value just needs rendering in the template — it unsubscribes automatically on component destroy, eliminating a whole class of memory leaks that takeUntil-based cleanup is easy to forget.

Was this cheat sheet helpful?

Vue Router Cheat Sheet

Redux Toolkit Cheat Sheet

Explore Topics

#AngularRxJS#AngularRxJSCheatSheet#WebDevelopment#Advanced#CoreRxJSConcepts#CommonOperators#AngularHttpClientWithRxJS#Async#Concurrency#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services