Angular Signals: fine-grained reactivity explained
Signals give Angular a precise way to track state: when a value changes, only the views that read it update. How signal, computed and effect work, with examples.
For most of its life, Angular found out what to update by checking. After a click, a timer or an HTTP response, Zone.js told the framework that something might have changed, and Angular walked the component tree to compare values. It works, but it does more work than necessary, and the reason a view updated is not always obvious.
Signals replace checking with knowing. They arrived in Angular 16 and became stable in Angular 17. Each release since has moved more of the framework onto them.
The three building blocks
import { Component, computed, effect, signal } from "@angular/core";
@Component({
selector: "app-cart",
template: `
<p>{{ count() }} items, total {{ total() }}</p>
<button (click)="add(250)">Add item</button>
`,
})
export class CartComponent {
readonly prices = signal<number[]>([]);
readonly count = computed(() => this.prices().length);
readonly total = computed(() => this.prices().reduce((sum, price) => sum + price, 0));
constructor() {
effect(() => console.log(`The cart now holds ${this.count()} items`));
}
add(price: number) {
this.prices.update((list) => [...list, price]);
}
}
| API | What it is | How you use it |
|---|---|---|
signal() |
A value that can change | Read with prices(), write with set() or update() |
computed() |
A value derived from other signals | Recalculated only when its inputs change, and cached |
effect() |
Code that runs when signals change | For side effects such as logging or saving |
Reading a signal is a function call. That call is how Angular records which template or computation depends on which value.
Why it is faster
Because dependencies are tracked, Angular knows exactly which views read total. When prices changes, it updates those views and leaves the rest alone. No tree walk and no guessing.
This also makes Zone.js unnecessary. Recent Angular versions can run without it, which removes a dependency from the bundle and makes stack traces easier to read.
Signals and RxJS
Signals do not replace RxJS. They do different jobs:
- Signals hold state: the current value of something.
- Observables model events over time: key presses, WebSocket messages, a request with retries.
Angular provides bridges in @angular/core/rxjs-interop. toSignal() turns an observable into a signal for the template, and toObservable() goes the other way.
How to adopt them
- Start with new components. Write local state as signals from the beginning.
- Convert simple state next. A class field that the template reads is an easy change.
- Use
computedfor derived values. If a value can be calculated from other signals, it should not be set from an effect. - Keep effects for the outside world. Logging, local storage, calls to a non-Angular library.
- Move inputs over. The
input()function gives you component inputs as signals.
The takeaway
Signals make Angular state explicit. You can read a component and see what depends on what, and the framework uses the same information to update less. Existing applications can adopt them one component at a time, so there is no reason to wait for a rewrite.