Un Observable (dalla libreria RxJS) rappresenta un flusso di valori nel tempo a cui è possibile sottoscriversi. Angular utilizza RxJS in modo pervasivo — le richieste HTTP, gli eventi del router, i form e EventEmitter sono tutti basati su Observable — quindi comprenderli è essenziale.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Gli Observable possono emettere più valori, si eseguono solo quando sottoscritti e possono essere disattivati (cancellati) — rendendoli ideali per eventi, flussi e HTTP che potresti voler cancellare.
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
});
Niente accade finché non chiami .subscribe() — l'Observable è 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));
Gli operatori (concatenati dentro .pipe()) trasformano il flusso in modo dichiarativo — debounce, filter, map, ecc. — risolvendo elegantemente i problemi asincroni comuni (come la ricerca mentre digiti).
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Le sottoscrizioni manuali devono essere ripulite in ngOnDestroy, altrimenti continuano a funzionare dopo che il componente è scomparso — una memory leak. Soluzioni comuni: la async pipe (disattiva automaticamente), o takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
Gli Observable RxJS sono tessuti in tutta Angular — non puoi usare HttpClient, form reattivi o il router senza di essi.
Comprendere la sottoscrizione, gli operatori e soprattutto disattivare (o usare la async pipe per evitare la gestione manuale) è critico: è sia la fonte della potenza di Angular per i dati asincroni che uno dei suoi difetti più comuni (memory leak da sottoscrizioni dimenticate).