Observables — Basics
Observable ek STREAM of values hai, over TIME — Promise (ek value, ek baar) se alag, Observable MULTIPLE values emit kar sakta hai, over time. subscribe() se "listen" karte ho values ko. Angular HEAVILY RxJS (Observable library) use karta hai — HTTP calls, forms, router events sab Observables return karte hain.
import { Observable } from 'rxjs';
const numberStream$ = new Observable(subscriber => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
subscriber.complete();
});
numberStream$.subscribe({
next: (value) => console.log('Got: ' + value),
complete: () => console.log('Stream complete!')
});
// Output: Got: 1, Got: 2, Got: 3, Stream complete!
// Naming convention: Observable variables ke naam $ se end hote hain
// (jaise numberStream$) — ye sirf convention hai, functionally koi effect nahi- Observable = stream of values OVER TIME (Promise = ek value, ek baar)
- subscribe() = values "listen" karna
- $ suffix naming convention = "ye Observable hai"
Manually subscribe() karne par, manually unsubscribe() BHI karna ZAROORI hai (component destroy hote waqt) — warna Observable "zinda" rehta hai, memory leak hota hai, aur destroyed component par callbacks chalते rehte hain.
import { Subscription } from 'rxjs';
export class MyComponent implements OnInit, OnDestroy {
private subscription!: Subscription;
ngOnInit() {
this.subscription = this.dataService.getData().subscribe(data => {
console.log(data);
});
}
ngOnDestroy() {
this.subscription.unsubscribe(); // ZAROORI — memory leak avoid karo
}
}"Cold" Observable HAR subscriber ke liye NAYA execution shuru karta hai (jaise ek HTTP request — har subscriber apna khud ka request trigger karta hai). "Hot" Observable EK SHARED execution hai, sab subscribers SAME stream dekhte hain (jaise mouse clicks — event already ho raha hai, subscribers sirf "join" karte hain).
// Cold — har subscribe() naya HTTP call trigger karta hai:
const data$ = this.http.get('/api/users');
data$.subscribe(...); // Request #1
data$.subscribe(...); // Request #2 — ALAG request!
// Hot — Subject SHARED hai:
const clicks$ = fromEvent(document, 'click');
clicks$.subscribe(...); // dono SAME click events dekhते hain
clicks$.subscribe(...);