एक Observable (RxJS library से) समय के साथ values की एक stream का प्रतिनिधित्व करता है जिसे आप subscribe कर सकते हैं। Angular RxJS का व्यापक उपयोग करता है — HTTP requests, router events, forms, और EventEmitter सभी Observable-आधारित हैं — इसलिए इन्हें समझना आवश्यक है।
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 (cancel) किए जा सकते हैं — जो उन्हें events, streams, और ऐसे HTTP के लिए आदर्श बनाता है जिसे आप cancel करना चाह सकते हैं।
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 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 (.pipe() के भीतर chained) stream को घोषणात्मक रूप से transform करते हैं — debounce, filter, map, आदि — सामान्य async समस्याओं (जैसे search-as-you-type) को सुंदरता से हल करते हैं।
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Manual subscriptions को ngOnDestroy में साफ किया जाना चाहिए, अन्यथा वे component के समाप्त होने के बाद भी चलते रहते हैं — एक memory leak। सामान्य समाधान: async pipe (स्वतः unsubscribe करता है), या takeUntilDestroyed()।
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
RxJS Observables Angular में गुँथे हुए हैं — आप इनके बिना HttpClient, reactive forms, या router का उपयोग नहीं कर सकते।
Subscription, operators, और विशेष रूप से unsubscribing को समझना (या manual management से बचने के लिए async pipe का उपयोग करना) महत्वपूर्ण है: यह async data के लिए Angular की शक्ति का स्रोत भी है और इसके सबसे आम pitfalls में से एक भी (भूली हुई subscriptions से leaks)।