Um Observable (da biblioteca RxJS) representa um fluxo de valores ao longo do tempo que você pode se inscrever. Angular usa RxJS abundantemente — requisições HTTP, eventos de rota, formulários e EventEmitter são todos baseados em Observable — portanto, compreendê-los é essencial.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observables podem emitir múltiplos valores, executar apenas quando inscritos e podem ser desinscritos (cancelados) — tornando-os ideais para eventos, fluxos e HTTP que você pode 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 acontece até você chamar .subscribe() — o Observable é preguiçoso.
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));
Operadores (encadeados dentro de .pipe()) transformam declarativamente o fluxo — debounce, filter, map, etc. — resolvendo elegantemente problemas assíncronos comuns (como busca enquanto digita).
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Subscrições manuais devem ser limpas em ngOnDestroy, caso contrário continuarão executando após o componente desaparecer — um vazamento de memória. Soluções comuns: o async pipe (auto-desinscrição) ou takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
Observables RxJS estão tecidos em Angular — você não pode usar HttpClient, formulários reativos ou o roteador sem eles.
Compreender inscrição, operadores e especialmente desinscrição (ou usar o async pipe para evitar gerenciamento manual) é crítico: é tanto a fonte do poder do Angular para dados assíncronos quanto um de seus problemas mais comuns (vazamentos de subscriptions esquecidas).