Observable (RxJS लायब्ररीतून) हे वेळेवर मूल्यांचा प्रवाह दर्शवते ज्यावर आप्टूषाची करू शकता. Angular व्यापकपणे RxJS वापरते — HTTP विनंत्या, राउटर इव्हेंट्स, फॉर्म्स आणि EventEmitter सर्व Observable-आधारित आहेत — त्यामुळे त्यांची समज आवश्यक आहे.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observable अनेक मूल्ये उत्सर्जित करू शकतात, केवळ आप्टूषा केल्यावर कार्य करतात आणि अस्वीकार (रद्द) केले जाऊ शकतात — ते इव्हेंट्स, स्ट्रीम्स आणि HTTP साठी आदर्श बनवतात जे आप्पण रद्द करू शकता.
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
});
.subscribe() कॉल होईपर्यंत काहीही होत नाही — Observable आलसी आहे.
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));
ऑपरेटर्स (.pipe() मध्ये साखळीबद्ध) घोषणात्मकरित्या स्ट्रीम रूपांतरित करतात — debounce, filter, map इ. — सामान्य async समस्या (जसे की टाईप करताना शोध) मार्जितपणे सोडवतात.
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
व्यक्तिगत आप्टूषा ngOnDestroy मध्ये साफ करणे आवश्यक आहे, अन्यथा ते घटक गायब झाल्यानंतर चालू राहतात — मेमरी लीक. सामान्य उपाय: async pipe (स्वयं-unsubscribe) किंवा takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
RxJS Observable हे Angular मध्ये सर्वत्र विणलेले आहेत — HttpClient, प्रतिक्रियाशील फॉर्म्स किंवा राउटर विना त्यांच्या वापराशिवाय आप्पण असमर्थ आहात.
आप्टूषा, ऑपरेटर्स आणि विशेषतः अस्वीकार (किंवा व्यक्तिगत व्यवस्थापन टाळण्यासाठी async pipe वापरुन) समजून घेणे गंभीर आहे: हे async डेटा साठी Angular ची शक्तीचा स्रोत आणि त्याच्या सर्वात सामान्य नुकसान (विस्मृत आप्टूषा पासून लीक) दोन्ही आहे.