En Observable (fra RxJS-biblioteket) repræsenterer en strøm af værdier over tid, som du kan abonnere på. Angular bruger RxJS omfattende — HTTP-anmodninger, ruter-begivenheder, formularer og EventEmitter er alle Observable-baserede — så forståelse af dem er essentiel.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observables kan udsende flere værdier, udføres kun når de abonneres på, og kan opsiges (annulleres) — hvilket gør dem ideelle til begivenheder, strømme og HTTP, som du måske ønsker at annullere.
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
});
Intet sker, før du kalder .subscribe() — Observable er 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));
Operatorer (kædet inden for .pipe()) transformerer erklærende strømmen — debounce, filter, map osv. — og løser almindelige async-problemer (som søg-mens-du-skriver) elegant.
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Manuelle abonnementer skal ryddes op i ngOnDestroy, ellers fortsætter de med at køre efter komponenten er væk — en hukommelseslækage. Almindelige løsninger: async-pipe (auto-opsigelse), eller takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
RxJS Observables er vævet gennem Angular — du kan ikke bruge HttpClient, reaktive formularer eller routeren uden dem.
Forståelse af abonnering, operatorer og især opsigelse (eller brug af async-pipe for at undgå manuel administration) er kritisk: det er både kilden til Angulars kraft til async-data og et af dens mest almindelige faldgruber (lækager fra glemte abonnementer).