Observable (z biblioteki RxJS) reprezentuje strumień wartości w czasie, na który możesz się zasubskrybować. Angular powszechnie używa RxJS — żądania HTTP, zdarzenia routera, formularze i EventEmitter to wszystko oparte na Observable — dlatego zrozumienie ich jest niezbędne.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observable'e mogą emitować wiele wartości, wykonują się tylko po zasubskrybowaniu i mogą być anulowane (unsubscribed) — co czyni je idealnymi dla zdarzeń, strumieni i HTTP, które możesz chcieć anulować.
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 się nie dzieje, dopóki nie wywołasz .subscribe() — Observable jest leniwy.
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));
Operatory (połączone w .pipe()) deklaratywnie transformują strumień — debounce, filter, map itd. — elegancko rozwiązując typowe problemy asynchroniczne (takie jak wyszukiwanie podczas pisania).
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Ręczne subskrypcje muszą być czyszczone w ngOnDestroy, w przeciwnym razie będą działać po usunięciu komponentu — wyciek pamięci. Popularne rozwiązania: async pipe (automatyczne anulowanie subskrypcji) lub takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
RxJS Observable'e są wszyte w Angular — nie możesz używać HttpClient, reactive forms ani routera bez nich.
Zrozumienie subskrybowania, operatorów, a zwłaszcza anulowania subskrypcji (lub używania async pipe, aby uniknąć ręcznego zarządzania) jest krytyczne: jest to zarówno źródło mocy Angular'a w obsłudze danych asynchronicznych, jak i jeden z jego najczęstszych zagrożeń (wycieki z zapomnianych subskrypcji).