En Observable (från RxJS-biblioteket) representerar en ström av värden över tid som du kan prenumerera på. Angular använder RxJS överallt — HTTP-förfrågningar, routerhändelser, formulär och EventEmitter är alla baserade på Observable — så att förstå dem är väsentligt.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observables kan avge flera värden, exekveras endast när de prenumereras på och kan avprenumereras (avbrytas) — vilket gör dem ideala för händelser, strömmar och HTTP som du kanske vill avbryta.
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
});
Ingen händer förrän du .subscribe() — Observable är lat.
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 (kedjade inuti .pipe()) omvandlar deklarativt strömmen — debounce, filter, map osv. — löser elegantly vanliga asynkrona problem (som sökning-medan-du-skriver).
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Manuella prenumerationer måste rensas i ngOnDestroy, annars fortsätter de att köras efter att komponenten är borta — en minnesläcka. Vanliga lösningar: async-pipe (avprenumereras automatiskt) eller takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
RxJS Observables är väväda genom Angular — du kan inte använda HttpClient, reaktiva formulär eller routern utan dem.
Att förstå prenumeration, operatorer och särskilt avprenumeration (eller använda async-pipe för att undvika manuell hantering) är kritiskt: det är både källan till Angulars kraft för asynkrona data och en av dess mest vanliga fallgropar (läckor från glömda prenumerationer).