Što su Angular Signals?

Question

Accepted Answer

**Signals** su Angular-ova reaktivna primitivna (dodana u Angular 16+) za upravljanje stanjem — omota oko vrijednosti koja **obavještava konzumente kada se promijeni**, omogućavajući sitno granularne, učinkovite ažuriranja bez oslanjanja na Zone.js detekciju promjena. ## Kreiranje i korištenje signala ```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 }); } } ``` ## Čitanje signala: pozovite ga kao funkciju ```html ``` Zapamtite da se signali **čitaju pozivanjem** (`count()`), nije kao obična svojstva. U predlošcu, Angular prati točno koje signale prikaz čita, tako da se ažuriraju samo pogođeni dijelovi kada se signal promijeni. ## Tri vrste signala ```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` je lijenja i cachirana (kao Vue-ov computed); `effect` pokušava reaktivno izvršiti nuspojave (kao promatrač). ## Zašto signali važni: sitno granularna reaktivnost ```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 ``` Signali daju Angular-u **precizno praćenje ovisnosti** — kada se signal promijeni, ažuriraju se samo prikazi i computedi koji ga zapravo čitaju. To je učinkovitije od široke detekcije promjena koju Zone.js pokreće, i temelj je za potpuno uklanjanje Zone.js-a (zoneless način). ## Signali temeljeni na ulazima (noviji) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Zašto je to važno Signali su najznačajnija nedavna evolucija Angular-ove reaktivnosti — jednostavniji, eksplicitniji i daleko učinkovitiji model nego implicitna Zone.js detekcija promjena. Omogućavaju sitno granularna ažuriranja, smanjuju nepotrebnu provjeru, čisto se integriraju s computed/effect, te prate put prema zoneless Angular-u. Razumijevanje signala je sve važnije, jer Angular novi razvoj vodi prema njima kao zadanu primitivu stanja.