Observable (iz biblioteke RxJS) predstavlja tok vrijednosti tijekom vremena na koji se možete pretplatiti. Angular koristi RxJS sveprisutno — HTTP zahtjevi, router eventi, forme i EventEmitter su svi temeljeni na Observablima — zato je razumijevanje njih esencijalno.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observables mogu emitirati više vrijednosti, izvršavaju se samo kada su pretplaćeni, i mogu se desubscribati (otkazati) — što ih čini idealnima za događaje, tokove i HTTP koje biste možda željeli otkazati.
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
});
Niš se ne dogodi dok se ne pozove .subscribe() — Observable je lijen.
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));
Operatori (ulančani unutar .pipe()) deklarativno transformiraju tok — debounce, filter, map, itd. — rješavajući česte async probleme (kao search-as-you-type) elegantno.
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Manualne pretplate moraju biti očišćene u ngOnDestroy, inače se nastavljaju izvršavati nakon što je komponenta nestala — curenje memorije. Česta rješenja: async pipe (auto-unsubscribuje), ili takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
RxJS Observables su utkani kroz Angular — ne možete koristiti HttpClient, reaktivne forme ili router bez njih.
Razumijevanje pretplate, operatora, i posebno desubscribanja (ili korištenja async pipea kako biste izbjegli ručno upravljanje) je kritično: to je i izvor Angular snage za async podatke i jedan od njegovih najčešćih nedostataka (curenja od zaboravljenih pretplata).