What are Angular Signals?
At its core, an Angular Signal is a wrapper around a value that notifies consumers when that value changes.
In previous versions, Angular had to perform "Change Detection" across the entire component tree to find what changed. With Signals, the application doesn't have to guess anymore—we explicitly decide when data changes. While it can still be used for two-way binding, its primary goal is to reduce Angular's workload and give developers more control over data flow.
In other words, as developers, we can precisely call, modify, and manage changing values. Signals are categorized into two types: Writable and Read-only.
How to Use Angular Signals
Previously, setting up a variable or model in Angular was just like declaring a standard property. With Signals, it feels more like declaring a function (similar to the composition API in Vue 3).
Before (Standard Property):
multiply: number = 0;
Now (Using Signals):
multiply = signal<number>(0);
There are several types of signal-related functions, including input(), output(), computed(), and effect(). We will discuss these in the following sections.
Writable Signals
The signal() example above is a Writable Signal. We can declare it, read its value, replace it, or update it based on its previous state.
Reading a Signal
To read a signal, you call it as a getter function. This applies both in your TypeScript logic and within your HTML template.
Example:
multiply()
Setting a Signal Value
To replace the value of a signal entirely, use the .set() method.
Example:
multiply.set(5);
The value changes from 0 to 5.
Updating a Signal Value
To update a value based on its current state, use the .update() method. This provides a callback with the current value so you can modify it.
Example:
multiply.update((value: number) => value * 2);
The value changes from 5 to 10.
Does Angular have signal.mutate()?
During the Developer Preview phase, Angular introduced a mutate() function specifically for modifying properties within an object. However, the Angular team eventually decided to remove mutate() and keep only update() to ensure a more consistent and immutable approach to state management.
Computed Signals
A Computed Signal is a read-only signal that derives its value from other signals. You cannot manually "set" a value into a computed signal.
Based on the Angular 18 documentation, I understand it as a reactive dependency. If the signals inside the computed function change, the computed signal automatically recalculates.
Example:
const count = signal(10);
const doubleCount = computed(() => count() * 2);
// doubleCount will automatically become 20
Because it is read-only, you don't use .set() or .update(). You simply "listen" to it.