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 ਵਾਂਗ ਕਾਲ ਕਰੋ ```html ``` ਨੋਟ: signals **ਇਨ੍ਹਾਂ ਨੂੰ ਕਾਲ ਕਰ ਕੇ ਪੜ੍ਹੇ ਜਾਂਦੇ ਹਨ** (`count()`), ਸਾਧਾਰਨ properties ਵਾਂਗ ਨਹੀਂ। Template ਵਿੱਚ, Angular ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਟਰੈਕ ਕਰਦਾ ਹੈ ਕਿ view ਕਿਹੜੇ signals ਨੂੰ ਪੜ੍ਹਦਾ ਹੈ, ਇਸ ਲਈ ਜਦੋਂ signal ਬਦਲਦਾ ਹੈ ਤਾਂ ਸਿਰਫ ਪ੍ਰਭਾਵਿਤ ਹਿੱਸੇ ਅਪਡੇਟ ਹੁੰਦੇ ਹਨ। ## ਤਿੰਨ 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 ਵਾਂਗ)। ## ਸਿਗਨਲ ਮਾਇਨੇ ਕਿਉਂ ਰੱਖਦੇ ਹਨ: 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 ਜੋ ਅਸਲ ਵਿੱਚ ਇਸਨੂੰ ਪੜ੍ਹਦੇ ਹਨ ਅਪਡੇਟ ਹੁੰਦੇ ਹਨ। ਇਹ Zone.js ਦੁਆਰਾ ਟਰਿਗਰ ਕੀਤੀ broad change detection ਨਾਲੋਂ ਵਧੇਰੇ efficient ਹੈ, ਅਤੇ 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 ਨਾਲੋਂ ਸਾਧਾਰਨ, ਹੋਰ explicit, ਅਤੇ ਬਹੁਤ ਵਧੇਰੇ efficient model। ਉਹ fine-grained updates ਨੂੰ ਸਮਰਥ ਬਣਾਉਂਦੇ ਹਨ, ਬੇਲੋੜੀ ਜਾਂਚ ਨੂੰ ਘਟਾਉਂਦੇ ਹਨ, computed/effect ਨਾਲ ਸਾਫ ਤਰੀਕੇ ਨਾਲ ਜੁੜਦੇ ਹਨ, ਅਤੇ zoneless Angular ਲਈ ਬਾਟ ਪ੍ਰਸ਼ਸ਼ਤ ਕਰਦੇ ਹਨ। Signals ਨੂੰ ਸਮਝਣਾ ਕ੍ਰਮ ਨਾਲ ਜਰੂਰੀ ਹੋ ਰਿਹਾ ਹੈ, ਕਿਉਂਕਿ Angular ਨਵੀਨ ਵਿਕਾਸ ਨੂੰ ਉਨ੍ਹਾਂ ਵਲ default state primitive ਦੇ ਰੂਪ ਵਿੱਚ ਨਿਰਦੇਸ਼ਿਤ ਕਰ ਰਿਹਾ ਹੈ।