Observables کیا ہیں اور Angular RxJS کو کیسے استعمال کرتا ہے؟

Question

Accepted Answer

ایک **Observable** (**RxJS** library سے) **وقت کے ساتھ values کے stream** کی نمائندگی کرتا ہے جس پر آپ subscribe کر سکتے ہیں۔ Angular RxJS کو بہت زیادہ استعمال کرتا ہے — HTTP requests، router events، forms، اور `EventEmitter` سب Observable-based ہیں — لہذا ان کو سمجھنا ضروری ہے۔ ## Observable بمقابلہ Promise ```text Promise: a SINGLE future value, eager, can't cancel Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE ``` Observables متعدد values emit کر سکتے ہیں، صرف subscribe کرنے پر execute ہوتے ہیں، اور unsubscribe (منسوخ) کیے جا سکتے ہیں — جو انہیں events، streams، اور HTTP کے لیے موزوں بناتا ہے جو آپ منسوخ کرنا چاہتے ہوں۔ ## Subscribing ```ts import { HttpClient } from "@angular/common/http"; this.http.get("/api/users").subscribe({ next: (users) => this.users = users, // each emitted value error: (err) => console.error(err), // on error complete: () => console.log("done"), // stream finished }); ``` کچھ نہیں ہوتا جب تک آپ `.subscribe()` نہیں کرتے — Observable lazy ہے۔ ## Operators streams کو تبدیل کرتے ہیں ```ts 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 (`.pipe()` کے اندر chain شدہ) declaratively stream کو تبدیل کرتے ہیں — debounce، filter، map، وغیرہ — عام async مسائل (جیسے search-as-you-type) کو خوبصورتی سے حل کرتے ہیں۔ ## Memory-leak کا خطرہ: unsubscribe ```ts import { Subscription } from "rxjs"; private sub = new Subscription(); ngOnInit() { this.sub = this.data$.subscribe(...); } ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks ``` دستی subscriptions کو `ngOnDestroy` میں صاف کرنا ضروری ہے، ورنہ وہ component کے غائب ہونے کے بعد بھی چلتے رہتے ہیں — memory leak۔ عام حل: **`async` pipe** (خود بخود unsubscribe کرتا ہے)، یا `takeUntilDestroyed()`۔ ```html

``` ## یہ کیوں اہم ہے RxJS Observables Angular میں سب جگہ موجود ہیں — آپ HttpClient، reactive forms، یا router کے بغیر نہیں استعمال کر سکتے۔ Subscription، operators، اور خاص طور پر **unsubscribing** (یا `async` pipe استعمال کر کے دستی management سے بچنا) کو سمجھنا اہم ہے: یہ async data کے لیے Angular کی طاقت کا ذریعہ ہے اور اس کے سب سے عام نقصانات میں سے ایک (فراموش شدہ subscriptions سے leaks)۔