Angular Signals అంటే ఏమిటి?

Question

Accepted Answer

**Signals** అనేది Angular యొక్క reactive primitive (Angular 16+ లో జోడించబడింది) స్థితి నిర్వహణ కోసం — ఒక విలువ చుట్టూ ఉన్న ఒక wrapper, ఇది **మారినప్పుడు వినియోగదారులకు తెలియజేస్తుంది**, Zone.js మార్పు గుర్తింపుపై ఆధారపడకుండా సూక్ష్మ, సమర్థవంతమైన అప్‌డేట్‌లను ప్రారంభిస్తుంది. ## సిగ్నల్‌ను సృష్టించడం మరియు ఉపయోగించడం ```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 }); } } ``` ## సిగ్నల్‌ను చదవండి: దానిని ఫంక్షన్‌గా కాల్ చేయండి ```html ``` Signals **వాటిని కాల్ చేయడం ద్వారా చదవబడతాయి** (`count()`), సాధారణ ప్రాపర్టీలుగా కాదు. టెంప్లేట్‌లో, Angular సరిగా ఏ signals ఒక view చదువుతుందో ట్రాక్ చేస్తుంది, కాబట్టి signal మారినప్పుడు ప్రభావితమైన భాగాలు మాత్రమే అప్‌డేట్ చేయబడతాయి. ## మూడు 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` side effects ను reactively నడుపుతుంది (watcher లాగా). ## Signals ఎందుకు ముఖ్యమైనవి: సూక్ష్మ 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 మాత్రమే అప్‌డేట్ చేయబడతాయి. ఇది Zone.js ట్రిగర్ చేసే విస్తృత మార్పు గుర్తింపు కంటే మరింత సమర్థవంతమైనది, మరియు Zone.js ను పూర్తిగా తీసివేయడానికి ఆధారం (zoneless mode). ## Signal-ఆధారిత inputs (క్రొత్తవి) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## ఇది ఎందుకు ముఖ్యమైనది Signals Angular యొక్క reactivity లో చివరి గణనీయ పరిణామం — implicit Zone.js మార్పు గుర్తింపు కంటే సరళమైన, మరింత స్పష్టమైన, మరియు చాలా సమర్థవంతమైన నమూనా. వాటి సూక్ష్మ అప్‌డేట్‌లను ప్రారంభిస్తుంది, అనవసరమైన చెక్‌లను తగ్గిస్తుంది, computed/effect తో స్పష్టంగా ఏకీకృతం చేస్తుంది, మరియు zoneless Angularకు మార్గం సుగమం చేస్తుంది. Signals ను అర్థం చేసుకోవడం పెరుగుపూర్వక అవసరమైనది, ఎందుకంటే Angular కొత్త అభివృద్ధిని వాటి వైపుకు default state primitive గా మార్పిడి చేస్తుంది.