Ein Observable (aus der RxJS-Bibliothek) stellt einen Strom von Werten über die Zeit dar, auf den man sich abonnieren kann. Angular verwendet RxJS überall — HTTP-Anfragen, Router-Ereignisse, Formulare und EventEmitter sind alle Observable-basiert — daher ist deren Verständnis wesentlich.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observables können mehrere Werte emittieren, werden nur bei Abonnement ausgeführt und können abgemeldet (storniert) werden — ideal für Ereignisse, Streams und HTTP, die man möglicherweise stornieren möchte.
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
});
Es passiert nichts, bis man .subscribe() aufruft — das Observable ist 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));
Operatoren (in .pipe() verkettet) transformieren den Stream deklarativ — debounce, filter, map usw. — und lösen häufige Async-Probleme (wie Suche-während-Eingabe) elegant.
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Manuelle Abonnements müssen in ngOnDestroy bereinigt werden, sonst laufen sie weiter, nachdem die Komponente weg ist — ein Speicherleck. Häufige Lösungen: die async-Pipe (automatisches Abmelden), oder takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
RxJS Observables sind überall in Angular verflochten — man kann HttpClient, reaktive Formulare oder den Router nicht ohne sie verwenden.
Das Verständnis von Abonnement, Operatoren und besonders Abmelden (oder die async-Pipe nutzen, um manuelle Verwaltung zu vermeiden) ist entscheidend: Es ist sowohl die Quelle von Angulars Kraft für asynchrone Daten als auch eine der häufigsten Fallstricke (Lecks aus vergessenen Abonnements).
Eine Sammlung von IT-Interviewfragen mit ausführlichen Antworten — vom Junior bis zum Senior.
Spenden