Reference · Frontend · Angular 16 + RxJS

RxJS untuk interview Angular 16

Ringkasan satu halaman. Dari Lesson 0015.

Observable vs Promise

	Promise	Observable
Mulai	langsung saat dibuat (eager)	saat `subscribe()` (lazy)
Nilai	satu	nol sampai banyak (`next` / `error` / `complete`)
Batal	tidak bisa	`unsubscribe()`
Rangkai	`.then` / `.catch`	`.pipe(op, op)` lalu `.subscribe`

HttpClient: cold. Tanpa subscribe tidak ada request; dua kali subscribe = dua request.

Subject

Jenis	Subscriber baru menerima	Pakai untuk	React
`Subject`	hanya nilai setelah subscribe	event	event emitter
`BehaviorSubject(awal)`	nilai terakhir, langsung	state bersama di service	state di Context / store
`ReplaySubject(n)`	n nilai terakhir	cache beberapa nilai	–

private readonly items = new BehaviorSubject<Product[]>([]);
readonly items$ = this.items.asObservable();
add(p: Product) { this.items.next([...this.items.value, p]); }

Pilih operator

Skenario	Operator	Kenapa
Search box / route param	`debounceTime` → `distinctUntilChanged` → `switchMap`	request lama dibatalkan, hasil lama tidak menimpa
Beberapa request paralel, tunggu semua	`forkJoin`	seperti `Promise.all`; satu error = semua error
Hapus/upload massal, semua harus jalan	`mergeMap` (opsi `concurrent`)	paralel, tidak ada yang dibatalkan
Simpan berurutan	`concatMap`	antre; = `mergeMap` dengan concurrency 1
Tombol Simpan/Login diklik berkali-kali	`exhaustMap`	klik baru diabaikan selama request jalan
Ubah bentuk data	`map`	seperti `Array.map` per nilai
Request gagal → nilai cadangan	`catchError(() => of([]))`	seperti `.catch`; taruh di dalam `switchMap`

Mencegah memory leak

async pipe (utama): *ngFor="let p of products$ | async". Subscribe dan unsubscribe otomatis.
takeUntil(this.destroy$) di akhir pipe; ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); }
takeUntilDestroyed() (@angular/core/rxjs-interop): ada di v16 tapi masih developer preview.

Berbahaya: subscribe manual ke stream yang tidak pernah complete (interval, valueChanges, Subject di service) tanpa cleanup. React: useEffect tanpa cleanup.

Jebakan interview

Lupa subscribe pada http.get → tidak ada request.
mergeMap di search box → race condition, hasil lama menimpa.
catchError di stream luar → search box mati setelah error pertama.
switchMap untuk DELETE massal → sebagian request dibatalkan.

Sumber: RxJS Observable · RxJS Subject · switchMap · mergeMap · exhaustMap · forkJoin · Angular v16: Observables compared · HttpClient · AsyncPipe