Sebuah Observable (dari perpustakaan RxJS) mewakili aliran nilai sepanjang waktu yang dapat Anda berlangganan. Angular menggunakan RxJS secara luas — permintaan HTTP, peristiwa router, formulir, dan EventEmitter semuanya berbasis Observable — jadi memahaminya sangat penting.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observable dapat memancarkan banyak nilai, hanya dijalankan saat berlangganan, dan dapat dibatalkan — menjadikannya ideal untuk peristiwa, aliran, dan HTTP yang mungkin ingin Anda batalkan.
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
});
Tidak ada yang terjadi sampai Anda .subscribe() — Observable 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 (dirantai dalam .pipe()) secara deklaratif mengubah aliran — debounce, filter, map, dll. — menyelesaikan masalah async umum (seperti pencarian sambil mengetik) dengan elegan.
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Langganan manual harus dibersihkan di ngOnDestroy, atau mereka terus berjalan setelah komponen hilang — kebocoran memori. Solusi umum: async pipe (berhenti berlangganan otomatis), atau takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
Observable RxJS tertanam di seluruh Angular — Anda tidak dapat menggunakan HttpClient, formulir reaktif, atau router tanpanya.
Memahami langganan, operator, dan terutama pembatalan berlangganan (atau menggunakan async pipe untuk menghindari pengelolaan manual) sangat penting: ini adalah sumber kekuatan Angular untuk data async dan salah satu jebakan paling umumnya (kebocoran dari langganan yang terlupakan).