Signals in Angular v16 !

Angular version 16 was released and Angular version 16, gives us many nice features. It also gives us One super important huge new feature, it gives us Signals.

Now, as mentioned, that's not the only new feature, attached, you find a link to the official release blog post where all those new features are listed and explained. For example, Angular 16 also allows us to mark inputs as required, leading to errors if you accidentally forgot to pass a value to some component input.

But signals are the big new thing and Angular 16 adds them as a developer preview which means that the feature is not finished yet. More features might be added and patterns and best practices are yet to evolve.

What Are Signals?

On February 15th, 2023, Angular's team introduced Signals to the framework with a simple pull request. Since then, there have been keen discussions in the Angular community about its use and benefits. Many have even started prototyping with signals to try out its functionality.

Well, signals in the end give you an alternative way of detecting changes in Angular, right now without signals, Angular handles change detection for you.

It, for example, understands that you got some click listeners. It then watches the methods that are being executed as those clicks occur. And it understands that in those methods, data gets changed, properties of this component clause. Angular then also evaluates your UI and finds out where this data is being used so that it can update those parts of the UI. The big advantage of this current change detection system, therefore, is that it's fully automatic and you don't have to do anything, which of course sounds perfect. The downside is that the performance is impacted by this automatic watching and this automatic algorithm which is executed all the time. And the Angular bundle size is also a bit bigger than it needs to be because it has to include all these change detection code signals to give you an alternative way of handling changes and change detection, with signals, which can but don't have to be used in Standalone Components, you create values by calling the Signal function which is provided by Angular.

It's imported from Angular Core. This Signal function creates a Signal object and this object acts as a wrapper around your data. And signals can wrap any kind of data, numbers, strings, booleans, objects, and of course also arrays. They can wrap any kind of data. In this case here, a number and signals then are updated by calling special update methods like set, mutate, or update, now, the difference is in the end are that update gets a function that yields the new value based on the current value. Mutate can be used by updating an old value that's provided automatically by Angular, just as it's the case with an update by mutating that old value instead of returning a new value. That's the difference between mutate and update. Update returns a new value, mutate mutates an existing value, in this case, an existing array. And alternatively, you could also simply call set to set a new value. If that new value depends on an old value and you don't want to use an update, which would be a great alternative, you could simply call the old value as a function to derive the overall new value. And that's another special thing about signals. You don't just update them differently by calling these special updating methods, but you also rate them.

So Signal values are accessed by calling those signals as functions in the places where you wanna read them. And that's the whole idea behind signals. Now, as you can see signals, therefore, mean a bit more work for you, the developer, because there is no automatic change detection anymore. Instead, you have to tell Angular by calling set, mutate or update whenever a value changes. And you also have to tell Angular where that Signal data is being used by executing that Signal as a function, for example, here in this template. But the huge advantage of this signals feature is that you got more control over when change detection runs and you therefore can achieve a better application performance and a smaller application bundle. Though this will only be true once more Signal features are added in the future because then you will indeed be able to switch to a Signal only.

Angular app, which gets rid of all that automatic change detection code, which is included in the bundle otherwise. But that's why this signals feature exists. It can lead to better performance, a smaller bundle size, and in some ways also to more control over when the UI updates for you, the developer.

Wrapping Up

Signals represent a significant advancement in Angular's reactive programming capabilities and change detection features.

Signals are available as a developer preview in Angular v16. As part of that preview, signals are integrated into the existing change detection model. Future signal features expect to improve change detection and mark components for the check, somewhat like the OnPush change detection that we have today with the async pipe.

An easy way to try out signals is to use Stackblitz, which is an online editor that works well with Angular and doesn't require any installation. To use Stackblitz with signals:

1. Navigate to the stackblitz website: www.stackblitz.com.

2. Click the Angular icon to create an Angular project.

3. Edit the resulting package.json file and change the versions of the @angular packages to the latest pre-release of Angular v16.

4. Save the project to refresh dependencies.

5. Try out signals!

Signals are coming! They'll improve our code's reactivity and change detection. They'll make our code easier to create and read. And they are great fun!