Angular Signals — An overview
Hey Hey folks!! I hope you’re doing great. This is my first article of 2025 and I want to start wishing you all a happy new year!! Nothing better than starting this period studying and sharing knowledge right?
In this article I want to talk about the new Signals API that angular released as a developer preview in v16 and that become stable in v17. Let’s discussed what is this new API, why we should use it and how to use it. Shall we begin?
Let’s start answering this question: What is the point of this new Signals API?
The whole objective of Signals is to provide a new way for our code to tell our templates that our data has changed which will improve Angular’s change detection and make or code more reactive.
Here is a simple example that will illustrate the why:
What is the value printed by console log on line 4 and then line 6? If your answer is 3, it is correct. The value of a + b is assigned when the expression is first evaluated. The variable z doesn’t react to changes in a or b. And that is the exact problem that signals want to solve. The whole idea of Signals is to provide an easy way to our code react to changes!
How can we react to changes prior to signals? One way is to create a getter method. For example:
By defining the method to get the total, when the quantity changes, Angular’s change detection kicks in, the price is updated and the template can see the updated value.
Another way to implement the same functionality is using events. We could define a method called onQuantitySelected that will be bind to an event on the template and get executed when the user changes the quantity.
With this approach we will get the same result, which is to update our data when some information changes.
These two approaches works for changes in the same component. But what if this change would need to reflect on a totally separated component? How that component would know when to update its information? That’s when Signals come in.
Here is an example using the Signals API approach.
We create the quantity property as a Signal of number. Then we can define a computed signal called total that reacts and recalculate every time the quantity signal changes.
If we go back to the first example, we could rewrite it using signals, and the final result would be totally different, like below:
We create a signal called a with the value of 1, a signal called b with the value of 2 and a computed signal c with the sum of a and b. If we change the value of a, the computed signal c will automatically reacts and recalculates and we get the value of 12.
If we were using the value of c on our template, Angular’s change detection will do its job and the value of c would be updated. Now, our components can be more reactive :D
In summary, Signals:
- Provide more reactivity to our code.
- Allows a finer control over change detection.
In the first part we talked a little bit about the why, now we are going to discuss: What is a signal?
Signal = value + change notification.
A signal could be explained as a value + a change notification. To illustrate, we could think of a signal as a box, which will hold values inside it. Every time that the value changes, the box would glow providing a notification so others can see it.
Here is a few characteristics of a signal:
- It is reactive.
- It always has a value.
- It is side effect free — meaning that reading a signal can cause no other changes nor execute any other code.
Last but not least, how can we use Signals? Let’s see some examples of how to create, read and set them.
On line 1 to 4 we create some signals using the signal constructor function. We can declare a type or not, and the signal must always have a value.
On line 7 to 12 we see some examples of reading a signal. We can read them by calling its getter function using the signal name + () (empty parentheses).
On line 15 there is an example of setting a new value to a signal using the set function providing a new value. There is also some other functions that are worth mentioning. We can use the update() function to update a signal value based on the current value and the mutate() function to mutate content in place, not the value itself.
When the value of a signal is updated, it automatically notifies any consumers* (any code that is interested in notifications when the signal changes) that the signal changed, so those consumers can update when it’s their turn to execute.
Finally, the last function that I want to talk about is the computed(). This function creates a signal that depends on other signals. It receives a computation function that is executed every time that any dependent signal changes and its value is read. This computed signal is read only, so it cannot be modified by set, update or mutate functions.
The computed value of this signal is memoized, which means that it stores the computed result to be reused when its value is read by other consumers.
In conclusion, the new signals API is a powerful feature added to the Angular framework. It is also paving the way to make angular zoneless.
I wrote this article based on a video by Deborah Kurata where she explains all the above in more details. You can check her video here.
I hope you find this writing useful.
Nice coding!!
