An Observable (from the RxJS library) represents a stream of values over time that you can subscribe to. Angular uses RxJS pervasively — HTTP requests, router events, forms, and EventEmitter are all Observable-based — so understanding them is essential.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observables can emit multiple values, only execute when subscribed, and can be unsubscribed (cancelled) — making them ideal for events, streams, and HTTP that you might want to cancel.
import { HttpClient } from "@angular/common/http";
this.http.get<User[]>("/api/users").subscribe({
next: (users) => this.users = users, // each emitted value
error: (err) => console.error(err), // on error
complete: () => console.log("done"), // stream finished
});
Nothing happens until you .subscribe() — the Observable is lazy.
import { map, filter, debounceTime } from "rxjs/operators";
this.searchInput.valueChanges.pipe(
debounceTime(300), // wait for typing to pause
filter(text => text.length > 2), // ignore short queries
map(text => text.trim()), // transform
).subscribe(query => this.search(query));
Operators (chained inside .pipe()) declaratively transform the stream — debounce, filter, map, etc. — solving common async problems (like search-as-you-type) elegantly.
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Manual subscriptions must be cleaned up in ngOnDestroy, or they keep running after the component is gone — a memory leak. Common solutions: the async pipe (auto-unsubscribes), or takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
RxJS Observables are woven through Angular — you can't use HttpClient, reactive forms, or the router without them.
Understanding subscription, operators, and especially unsubscribing (or using the async pipe to avoid manual management) is critical: it's both the source of Angular's power for async data and one of its most common pitfalls (leaks from forgotten subscriptions).