Un Observable (de la librería RxJS) representa un flujo de valores en el tiempo al que puedes suscribirte. Angular utiliza RxJS ampliamente — las peticiones HTTP, los eventos del router, los formularios y EventEmitter están todos basados en Observable — por lo que comprenderlos es esencial.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Los Observables pueden emitir múltiples valores, solo se ejecutan cuando te suscribes y pueden ser desinscritos (cancelados) — lo que los hace ideales para eventos, flujos e HTTP que podrías querer cancelar.
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
});
Nada sucede hasta que llames a .subscribe() — el Observable es 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));
Los operadores (encadenados dentro de .pipe()) transforman el flujo de manera declarativa — debounce, filter, map, etc. — resolviendo problemas asíncronos comunes (como búsqueda mientras escribes) elegantemente.
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Las suscripciones manuales deben limpiarse en ngOnDestroy, o seguirán ejecutándose después de que el componente desaparezca — una fuga de memoria. Soluciones comunes: el async pipe (desinscripción automática), o takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
Los Observables de RxJS están tejidos en todo Angular — no puedes usar HttpClient, formularios reactivos o el router sin ellos.
Comprender la suscripción, los operadores y especialmente la desinscrición (o usar el async pipe para evitar la gestión manual) es crítico: es tanto la fuente del poder de Angular para datos asíncronos como uno de sus problemas más comunes (fugas por suscripciones olvidadas).