Een Observable (uit de RxJS-bibliotheek) vertegenwoordigt een stroom van waarden in de tijd waarop je je kunt abonneren. Angular gebruikt RxJS overal — HTTP-verzoeken, router-events, formulieren en EventEmitter zijn allemaal op Observable gebaseerd — dus het is essentieel om ze te begrijpen.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observables kunnen meerdere waarden uitzenden, worden alleen uitgevoerd wanneer je je abonneert, en kunnen worden afgemeld (geannuleerd) — waardoor ze ideaal zijn voor events, streams en HTTP die je mogelijk wilt annuleren.
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
});
Er gebeurt niets totdat je .subscribe() aanroept — de Observable is lui.
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));
Operators (gekoppeld in .pipe()) transformeren declaratief de stream — debounce, filter, map, enz. — en lossen elegante veelvoorkomende async-problemen op (zoals zoeken-terwijl-je-typt).
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Handmatige abonnementen moeten in ngOnDestroy worden opgeschoond, anders blijven ze draaien nadat de component weg is — een geheugenlek. Veelgebruikte oplossingen: de async pipe (automatisch afmelden), of takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
RxJS Observables zijn verweven door Angular — je kunt HttpClient, reactive forms of de router niet gebruiken zonder ze.
Begrip van abonnement, operators, en vooral afmelden (of het gebruik van de async pipe om handmatig beheer te vermijden) is van cruciaal belang: het is zowel de bron van de kracht van Angular voor async-gegevens als een van de meest voorkomende valkuilen (lekken door vergeten abonnementen).