Sebuah Observable (dari library RxJS) merepresentasikan sebuah aliran nilai sepanjang waktu yang dapat Anda subscribe. Angular menggunakan RxJS secara luas — permintaan HTTP, router events, forms, 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
Observables dapat mengeluarkan multiple values, hanya execute ketika di-subscribe, dan dapat di-unsubscribe (dibatalkan) — menjadikannya ideal untuk events, streams, 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 hingga Anda .subscribe() — Observable bersifat 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));
Operators (dirantai di dalam .pipe()) secara deklaratif mentransformasi aliran — debounce, filter, map, dll. — menyelesaikan masalah async umum (seperti search-as-you-type) dengan elegan.
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Subscriptions manual harus dibersihkan di ngOnDestroy, atau mereka akan terus berjalan setelah component hilang — sebuah memory leak. Solusi umum: async pipe (auto-unsubscribes), atau takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
RxJS Observables tersebar di seluruh Angular — Anda tidak bisa menggunakan HttpClient, reactive forms, atau router tanpa mereka.
Memahami subscription, operators, dan terutama unsubscribing (atau menggunakan async pipe untuk menghindari manajemen manual) adalah hal yang kritis: ini adalah sumber kekuatan Angular untuk async data dan juga salah satu pitfall-nya yang paling umum (leaks dari forgotten subscriptions).