Ce sunt Angular Signals?

Question

Accepted Answer

**Signals** sunt primitivul reactiv al Angular (adăugat în Angular 16+) pentru gestionarea stării — un wrapper în jurul unei valori care **notifică consumatorii când se modifică**, permițând actualizări fine-grained, eficiente fără a depinde de detectarea schimbărilor Zone.js. ## Crearea și utilizarea unui 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 }); } } ``` ## Citirea unui signal: apelați-l ca o funcție ```html ``` Observație: semnalele sunt **citite prin apelarea lor** (`count()`), nu ca proprietăți obișnuite. În șablon, Angular urmărește cu exactitate care semnale citește o vizualizare, deci doar părțile afectate se actualizează atunci când se schimbă un semnal. ## Cele trei tipuri de 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` este lazy și în cache (ca Vue's computed); `effect` execută efecte secundare reactiv (ca un watcher). ## De ce semnalele conteaza: reactivitate fine-grained ```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 ``` Signalele dau Angular **urmărire precisă a dependenților** — atunci când un semnal se schimbă, doar vizualizările și computeds-urile care îl citesc efectiv sunt actualizate. Aceasta este mai eficientă decât detectarea lată a schimbărilor pe care o declanșează Zone.js și constituie baza pentru eliminarea completă a Zone.js (mod fără zone). ## Intrări bazate pe signal (mai recent) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## De ce conteaza Signalele sunt cea mai semnificativă evoluție recentă în reactivitatea Angular — un model mai simplu, mai explicit și mult mai eficient decât detectarea schimbărilor implicite Zone.js. Permit actualizări fine-grained, reduc verificări inutile, se integrează curat cu computed/effect și deschid calea către Angular fără zone. Înțelegerea semnalelor devine din ce în ce mai esențială, deoarece Angular direcționează noua dezvoltare către ele ca primitiv de stare implicit.