What are Angular Signals?

Question

IT Interview Practice · Accepted Answer

**Signals** are Angular's reactive primitive (added in Angular 16+) for managing state — a wrapper around a value that **notifies consumers when it changes**, enabling fine-grained, efficient updates without relying on Zone.js change detection. ## Creating and using a 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 }); } } ``` ## Reading a signal: call it like a function ```html ``` Note signals are **read by calling them** (`count()`), not as plain properties. In the template, Angular tracks exactly which signals a view reads, so only the affected parts update when a signal changes. ## The three 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` is lazy and cached (like Vue's computed); `effect` runs side effects reactively (like a watcher). ## Why signals matter: 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 give Angular **precise dependency tracking** — when a signal changes, only the views and computeds that actually read it update. This is more efficient than the broad change detection Zone.js triggers, and is the foundation for removing Zone.js entirely (zoneless mode). ## Signal-based inputs (newer) ```ts name = input(); // @Input as a signal name = input.required(); ``` ## Why it matters Signals are the most significant recent evolution in Angular's reactivity — a simpler, more explicit, and far more efficient model than the implicit Zone.js change detection. They enable fine-grained updates, reduce unnecessary checking, integrate cleanly with computed/effect, and pave the way for zoneless Angular. Understanding signals is increasingly essential, as Angular is steering new development toward them as the default state primitive.

Creating and using a signal

Reading a signal: call it like a function

The three signal types

Why signals matter: fine-grained reactivity

Signal-based inputs (newer)

Why it matters

Related questions