RxJS in Angular

What Is RxJS and Why Does Angular Use It?

RxJS (Reactive Extensions for JavaScript) is a library for composing asynchronous and event-based code using Observables, streams of values over time that you can transform, combine, and react to declaratively.

Angular relies on RxJS internally for HttpClient responses, router events, reactive form value changes, and more, so understanding its core concepts pays off across the whole framework, not just in code you write yourself.

import { interval } from 'rxjs';
import { take } from 'rxjs/operators';

const source$ = interval(1000).pipe(take(3));

source$.subscribe(value => console.log(value));
// logs: 0, 1, 2 (one per second), then completes

Nothing happens until .subscribe() is called, Observables are lazy by design.

The Observable Contract

const subscription = observable$.subscribe({
  next: value => { /* handle emitted value */ },
  error: err => { /* handle failure */ },
  complete: () => { /* handle completion */ },
});

subscription.unsubscribe(); // stop listening

• An Observable can emit zero, one, or many values over time, then optionally complete or error.
• .subscribe() starts the Observable and provides callbacks for each type of notification.
• .unsubscribe() stops listening and, for many Observables, cancels the underlying work (like an HTTP request).
• The pipe() method chains operators together to transform the stream before it reaches your subscriber.

RxJS in Angular Cheatsheet

Where RxJS shows up throughout the framework.

Observables Are Lazy

Unlike a Promise (which starts running the moment it's created), an Observable does nothing until something subscribes to it. This is why calling an HttpClient method alone never sends a request, only .subscribe() (or the async pipe) does.

• Creating an Observable describes a stream; it doesn't start producing values yet.
• Each new subscription can (depending on the Observable) trigger its own independent execution.
• This laziness is why HttpClient requests aren't sent until you subscribe.

Operators Transform Streams

Operators are pure functions used inside .pipe() to transform, filter, or combine values as they flow through an Observable, without mutating the original source.

searchInput$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(term => this.searchService.search(term))
).subscribe(results => this.results = results);

This chain waits for typing to pause, ignores duplicate consecutive terms, and cancels a stale search request when a new one starts.

RxJS and Signals Working Together

Modern Angular doesn't require choosing exclusively between RxJS and signals, toSignal() converts an Observable into a signal for template rendering, and toObservable() does the reverse when you need to compose a signal into an RxJS pipeline.

users = toSignal(this.userService.getUsers(), { initialValue: [] });

Common Mistakes

• Expecting an HTTP request to be sent just from calling an HttpClient method, without subscribing to the result.
• Treating Observables exactly like Promises, an Observable can emit many values over time, not just one.
• Forgetting to unsubscribe from long-lived Observables (like interval or a WebSocket stream), causing leaks.
• Avoiding RxJS entirely in favor of manual callback nesting, missing out on declarative composition for async logic.

Key Takeaways

• RxJS provides Observables, a declarative way to work with values that arrive over time.
• Angular's HttpClient, reactive forms, and router are all built on top of RxJS Observables.
• Observables are lazy, nothing happens until something subscribes.
• toSignal()/toObservable() let RxJS and Angular signals interoperate cleanly.