Observables શું છે અને Angular RxJS નો ઉપયોગ કેવી રીતે કરે છે?

Question

Accepted Answer

એક **Observable** (RxJS લાઈબ્રેરીમાંથી) સમયના સાથે **મૂલ્યોનો સ્ટ્રીમ** રજૂ કરે છે જેને તમે subscribe કરી શકો છો। Angular RxJS નો વ્યાપક ઉપયોગ કરે છે — HTTP requests, router events, forms, અને `EventEmitter` બધા Observable-આધારિત છે — તેથી તેમને સમજવું આવશ્યક છે। ## 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 બહુવિધ મૂલ્યો ઉત્સર્જિત કરી શકે છે, માત્ર subscribe કરવામાં આવે ત્યારે જ કાર્ય કરે છે, અને unsubscribe (રદ કરી) શકાય છે — તેમને ઘટનાઓ, streams, અને HTTP માટે આદર્શ બનાવે છે જેને તમે રદ કરવા માંગો છો। ## Subscribe કરવું ```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 આળસુ છે। ## 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()` અંદર chained) declaratively stream ને રૂપાંતરિત કરે છે — debounce, filter, map, વગેરે — સામાન્ય async સમસ્યાઓ (જેમ કે search-as-you-type) ને સુંદરતાથી હલ કરે છે। ## મેમરી-લીક ની જોખમ: 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 ચાલ્યું જવા પછી પણ ચાલતાં રહે છે — એક મેમરી લીક। સામાન્ય ઉકેલો: **`async` pipe** (auto-unsubscribes), અથવા `takeUntilDestroyed()`। ```html

``` ## તે શા માટે મહત્વપૂર્ણ છે RxJS Observables Angular માં વણાયેલા છે — તમે HttpClient, reactive forms, અથવા router નો ઉપયોગ કર્યા વિના કરી શકતા નથી। Subscription, operators, અને ખાસ કરીને **unsubscribing** (અથવા મેનુઅલ સંચાલન ટાળવા માટે `async` pipe નો ઉપયોગ) સમજવું critical છે: તે Angular ની async ડેટા માટેની શક્તિ અને તેની સૌથી સામાન્ય pitfalls (ભૂલી ગયેલ subscriptions માંથી leaks) બંનેનો સ્ત્રોત છે।