Angular Signals کیا ہیں؟

Question

Accepted Answer

**Signals** Angular کا reactive primitive ہے (Angular 16+ میں شامل کیا گیا) جو state کو manage کرنے کے لیے ہے — یہ ایک value کے گرد ایک wrapper ہے جو **consumers کو مطلع کرتا ہے جب یہ تبدیل ہو**، fine-grained، موثر updates کو enable کرتا ہے بغیر Zone.js change detection پر منحصر ہوئے۔ ## 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 کی طرح کال کریں ```html ``` نوٹ کریں signals **انہیں کال کر کے پڑھے جاتے ہیں** (`count()`)، plain properties کے طور پر نہیں۔ Template میں، Angular بالکل track کرتا ہے کہ view کون سے signals پڑھتا ہے، تو جب کوئی signal تبدیل ہو تو صرف متاثر حصے update ہوتے ہیں۔ ## تین signal types ```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 کو **precise dependency tracking** دیتے ہیں — جب ایک signal تبدیل ہو، صرف وہ views اور computeds جو اسے actually پڑھتے ہیں update ہوتے ہیں۔ یہ Zone.js trigger کرنے والے broad 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 کو enable کرتے ہیں، غیر ضروری checking کو کم کرتے ہیں، computed/effect کے ساتھ صاف طریقے سے integrate ہوتے ہیں، اور zoneless Angular کی راہ ہموار کرتے ہیں۔ Signals کو سمجھنا تیزی سے ضروری ہو رہا ہے، کیونکہ Angular نئی development کو انہیں default state primitive کے طور پر استعمال کرنے کی طرف ڈال رہا ہے۔