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.
{ signal, computed, effect } ;
{
count = ();
double = ( .() * );
() {
..(.() + );
..( c + );
}
() {
( {
.();
});
}
}
<button (click)="increment()">{{ count() }} (double: {{ double() }})</button>
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.
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).
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).
name = input<string>(); // @Input as a signal
name = input.required<string>();
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.