Angular Signals શું છે?

Question

Accepted Answer

**Signals** એ Angular નો reactive primitive છે (Angular 16+ માં ઉમેર્યો છે) state મેનેજ કરવા માટે — એક મૂલ્યની આસપાસ wrapper જે **જ્યારે બદલાય તો consumers ને સૂચિત કરે છે**, Zone.js change detection પર આધાર રાખ્યા વિના fine-grained, efficient 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 ચોક્કસપણે ટ્રૅક કરે છે કે 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 ને અધ્ययન કરતા વ્યાપક 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 કરતાં સરળ, વધુ સ્પષ્ટ, અને ઘણું વધુ કાર્યક્ષમ મોડેલ। તેઓ fine-grained updates સક્ષમ કરે છે, બિનજરૂરી પરીક્ષણ ઘટાડે છે, computed/effect સાથે સ્વચ્છ રીતે integrate થાય છે, અને zoneless Angular માટે માર્ગ તૈયાર કરે છે। Signals સમજવું વધુને વધુ આવશ્યક છે, કારણ કે Angular નવા વિકાસને તેમ તરફ દિશા આપી રહ્યો છે તે default state primitive તરીકે।