Angular Signals
Today, let's take a look at a fairly new Angular 16 feature released in May 2023.
Signals add reactivity to Angular as a state tracking and change detection system. This way, signals can notify "subscribers" when the value changes.
I believe the easiest way to learn is by doing, so let's explain Signals through this awesome app created by Sarah Drasner. Start by clicking on the next Step.
There are 3 types of signals: Writable, Computed and Effects. Writable signals provide an API for updating their values directly.
To create a writable signal, we can call the signal() function with the initial value:
users = signal(9900);
We are currently tracking the amount of "All Users" in the app.
If we want to read users value, we simply call the signal.
'The users count is: ' + users()
Good news! 100 new users signed up to the app 🎉🎉
Let's change the value of signal, to do that we can .set() it directly.
users.set(10000);
To add users one-by-one, we can use .update() function
users.update(user => user + 1)
Computed signals are very handy if we want to update values which depend on our users:
thisMonth = computed(() => users() - lastMonth)
At the bottom of the app, you can see the last month data changed automatically because users count changed.
thisMonth is cached based on users and will only update when necessary. As a result, it's suitable to perform computationally expensive calculations in computed signals, such as filtering arrays.
An effect is an operation that runs whenever one or more signal values change. You can create an effect with the effect() function.
Specifically in our app, we use it to redraw the connecting lines when a user amount changes:
effect(() => redrawLines())
Effects always execute asynchronously, during the change detection process.
Applications that are already using OnPush, RxJs and async pipe are fully set up for Signals. With slight code modifications, they can be refactored to use the new signals logic and simplify the code.
Angular signals provide simplicity, smaller bundle sizes and intuitive API. However limited functionality and community support give an upper hand to other useful libraries at the moment, like RxJS. By understanding both, we can combine these tools to best suit our project's needs.
Hope you have enjoyed reading this article, you can go back-and-forth to each step to reactivate animations. Happy holidays from Mike! 🎄🎉