Az Observable (az RxJS könyvtárból) egy értékek sorozatát reprezentálja az idő múlásával, amely feliratkozható. Az Angular széleskörűen használja az RxJS-t — a HTTP-kérések, router-események, űrlapok és az EventEmitter mind Observable-alapúak — ezért ezek megértése elengedhetetlen.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Az Observables több értéket is kibocsáthatnak, csak feliratkozáskor hajtódnak végre, és leiratkozhatóak (megszakíthatóak) — ideálisak az eseményekhez, streamekhez és HTTP-hez, amelyeket esetleg meg akarsz szakítani.
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
});
Semmi sem történik, amíg meg nem hívod a .subscribe() metódust — az Observable lusta.
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));
Az operátorok (a .pipe() belsejében láncolt) deklaratívan átalakítják a streamet — debounce, filter, map, stb. — elegáns megoldást nyújtanak közönséges aszinkron problémákra (például keresés gépeléskor).
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
A manuális feliratkozásokat tisztítani kell az ngOnDestroy során, különben az komponens eltávolítása után is futnak — memóriavesztéshez vezet. Gyakori megoldások: az async pipe (automatikus leiratkozás), vagy a takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
Az RxJS Observables az Angular minden részére szétszórva vannak — nem használhatod a HttpClient-et, reaktív űrlapokat vagy a router-t nélkülük.
A feliratkozás, operátorok, és különösen a leiratkozás (vagy az async pipe használata a manuális kezelés elkerülésére) megértése kritikus: ez az Angular aszinkron adatok kezelésének erőforrása és ugyanakkor egyik leggyakoribb buktatója (a felejtett feliratkozások miatt keletkező memóriavesztés).