Angular Signals क्या हैं?

Question

Accepted Answer

**Signals** state प्रबंधन के लिए Angular की reactive primitive हैं (Angular 16+ में जोड़ी गईं) — एक value के चारों ओर एक wrapper जो **consumers को सूचित करता है जब वह बदलती है**, जिससे Zone.js change detection पर निर्भर हुए बिना fine-grained, कुशल updates संभव होते हैं। ## एक signal बनाना और उपयोग करना ```ts import { signal, computed, effect } from "@angular/core"; export class CounterComponent { count = signal(0); // a writable signal double = computed(() => this.count() * 2); // derived signal (auto-updates) increment() { this.count.set(this.count() + 1); // set a new value this.count.update(c => c + 1); // or update based on current } constructor() { effect(() => { console.log(`count is now ${this.count()}`); // re-runs when count changes }); } } ``` ## एक signal पढ़ना: इसे एक function की तरह call करें ```html ``` ध्यान दें कि signals को **call करके पढ़ा जाता है** (`count()`), सादे properties के रूप में नहीं। Template में, Angular ठीक-ठीक track करता है कि कोई view किन signals को पढ़ता है, इसलिए जब कोई signal बदलता है तो केवल प्रभावित हिस्से ही update होते हैं। ## तीन signal प्रकार ```text signal(value) → writable state, updated via .set() / .update() computed(() => ...) → derived/cached value; auto-recomputes when its deps change effect(() => ...) → runs a side effect whenever read signals change ``` `computed` lazy और cached है (Vue के computed की तरह); `effect` reactively side effects चलाता है (एक watcher की तरह)। ## Signals क्यों मायने रखते हैं: fine-grained reactivity ```text Traditional Angular: a change triggers checking the WHOLE component tree (Zone.js) Signals: Angular knows EXACTLY which views depend on a changed signal → update only those → far more efficient, and enables "zoneless" Angular ``` Signals Angular को **सटीक dependency tracking** देते हैं — जब कोई signal बदलता है, तो केवल वे views और computeds update होते हैं जो वास्तव में उसे पढ़ते हैं। यह Zone.js द्वारा trigger की जाने वाली व्यापक change detection से अधिक कुशल है, और Zone.js को पूरी तरह हटाने (zoneless mode) की नींव है। ## Signal-based inputs (नए) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## यह क्यों महत्वपूर्ण है Signals Angular की reactivity में हाल का सबसे महत्वपूर्ण विकास हैं — implicit Zone.js change detection की तुलना में एक सरल, अधिक स्पष्ट, और कहीं अधिक कुशल model। वे fine-grained updates सक्षम करते हैं, अनावश्यक checking को कम करते हैं, computed/effect के साथ स्वच्छता से एकीकृत होते हैं, और zoneless Angular का मार्ग प्रशस्त करते हैं। Signals को समझना तेजी से आवश्यक होता जा रहा है, क्योंकि Angular नई development को उनकी ओर default state primitive के रूप में दिशा दे रहा है।