Un Observable (din biblioteca RxJS) reprezintă un flux de valori în timp la care te poți abona. Angular folosește RxJS în mod extins — cereri HTTP, evenimente de rută, formulare și EventEmitter sunt toate bazate pe Observable — deci înțelegerea lor este esențială.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observable-urile pot emite multiple valori, se execută doar când te abonaezi și pot fi dezabonate (anulate) — făcându-le ideale pentru evenimente, fluxuri și HTTP pe care poate doriți să le anulați.
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
});
Nimic nu se întâmplă până nu apelezi .subscribe() — Observable-ul este leneș.
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));
Operatorii (înlănțuiți în .pipe()) transformă declarativ fluxul — debounce, filter, map, etc. — rezolvând elegant probleme asincrone comune (cum ar fi căutarea în timp ce tastezi).
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Abonările manuale trebuie să fie curățate în ngOnDestroy, altfel vor continua să se execute după ce componenta a dispărut — o scurgere de memorie. Soluții comune: async pipe (dezabonare automată) sau takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
Observable-urile RxJS sunt țesute prin Angular — nu poți folosi HttpClient, formulare reactive sau routerul fără ele.
Înțelegerea abonării, operatorilor și în special dezabonării (sau folosind async pipe pentru a evita gestionarea manuală) este critică: este atât sursa puterii Angular pentru date asincrone, cât și una dintre cele mai frecvente capcane (scurgeri din abonări uitate).