Observable (z knihovny RxJS) představuje proud hodnot v čase, na který se můžete přihlásit. Angular používá RxJS všudypřítomně — HTTP požadavky, évéností routeru, formuláře a EventEmitter jsou všechny založeny na Observable — takže jejich pochopení je nezbytné.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observables mohou vysílat více hodnot, provádějí se pouze po přihlášení a lze se jich odhlásit (zrušit) — což je ideální pro události, proudy a HTTP, které byste chtěli zrušit.
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
});
Nic se nestane, dokud nezavoláte .subscribe() — Observable je 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));
Operátory (zřetězené uvnitř .pipe()) deklarativně transformují proud — debounce, filter, map atd. — řeší běžné problémy async (jako search-as-you-type) elegantně.
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Manuální přihlášení se musí být vyčištěno v ngOnDestroy, jinak budou pokračovat v běhu poté, co je komponenta pryč — únik paměti. Běžná řešení: async pipe (automatické odhlášení), nebo takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
Observables z RxJS jsou všude v Angular — bez nich nemůžete používat HttpClient, reaktivní formuláře nebo router.
Porozumění přihlášení se, operátorům a zejména odhlášení se (nebo použití async pipe, abyste se vyhnuli ručné správě) je kritické: je to jak zdroj síly Angular pro asynchronní data, tak jeden z nejčastějších problémů (úniky z zapomenutých přihlášení).