Un Observable (de la bibliothèque RxJS) représente un flux de valeurs dans le temps auquel vous pouvez vous abonner. Angular utilise RxJS de manière omniprésente — les requêtes HTTP, les événements du routeur, les formulaires et EventEmitter sont tous basés sur les Observables — comprendre cela est donc essentiel.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Les Observables peuvent émettre plusieurs valeurs, s'exécutent uniquement lors d'un abonnement et peuvent être désabonnés (annulés) — ce qui les rend idéaux pour les événements, les flux et HTTP que vous pourriez vouloir annuler.
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
});
Rien ne se passe tant que vous n'appelez pas .subscribe() — l'Observable est paresseux.
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));
Les opérateurs (chaînés à l'intérieur de .pipe()) transforment déclarativement le flux — debounce, filter, map, etc. — résolvant élégamment les problèmes async courants (comme la recherche au fur et à mesure de la saisie).
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Les abonnements manuels doivent être nettoyés dans ngOnDestroy, sinon ils continuent à s'exécuter après que le composant soit détruit — une fuite mémoire. Les solutions courantes : le pipe async (auto-désabonnement) ou takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
Les Observables RxJS sont entrelacés dans Angular — vous ne pouvez pas utiliser HttpClient, les formulaires réactifs ou le routeur sans eux.
Comprendre l'abonnement, les opérateurs et surtout le désabonnement (ou utiliser le pipe async pour éviter la gestion manuelle) est critique : c'est à la fois la source de la puissance d'Angular pour les données async et l'un de ses pièges les plus courants (fuites provenant des abonnements oubliés).