Sawijining Observable (saka perpustakaan RxJS) nuduhake aliran nilai sajrone wektu sing bisa kowe subscribe. Angular nggunakake RxJS kanthi luas — permintaan HTTP, acara router, formulir, lan EventEmitter kabeh adhedhasar Observable — dadi mangerteni sing penting banget.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observable bisa ngirim macem nilai, mung uwal nalika disubscribe, lan bisa dicabut (dibatalake) — dadi cocok kanggo acara, aliran, lan HTTP sing bisa ono pengin dibatalake.
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
});
Taya apa sing ana kontal sampe kowe .subscribe() — Observable kuwi malas.
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));
Operator (disambung ing .pipe()) ngubah aliran kanthi deklaratif — debounce, filter, map, lsp. — nguciwake parane masalah async umum (kaya pencarian sambil ngetik) kanthi elegan.
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Subskripsi manual kudu dibersihake ing ngOnDestroy, utawa kudu terus uwal sawise komponen ilang — iki memory leak. Solusi umum: async pipe (unsubscribe otomatis), utawa takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
Observable RxJS dijahit ing sakabèhé Angular — kowe ora bisa nggunakake HttpClient, formulir reaktif, utawa router tanpa kuwi.
Pamahaman tentang subscription, operator, lan utamané unsubscribe (utawa gunakake async pipe kanggo nyegah pengurusan manual) krusial: iki mbè sumber kekuwatan Angular kanggo data async lan uga iku jebakan paling umum (memory leak saka subscription sing kalali).