Are you curious about the new Angular 16 feature that will improve change detection and make your code more reactive?
Look no further than Angular signals!
In this article, we will introduce Angular signals and explain how they can benefit your applications. With signals available for developer preview in Angular v16, set to be released in May 2023, you can try this exciting new feature out now. We’ll even show you how to get started with Angular signals in your own projects.
Let’s dive into the world of Angular signals!
What are Angular Signals ๐ค?
Signals are a reactive value, technically are a zero-argument function [(() => T)] , when we execute it they return the value.
NB: Value plus a change notification.
A signal is just a special type of variable that holds a value. But unlike other variables, a signal also provides notification when the variable value changes.
Where can we use signals? – anywhere in your code
How to use signals ?
We create and initialize a signal by calling the function signal()
Example:
const counter = signal(0);
// Signals are getter functions - calling them reads their value.
console.log('The count is: ' + count());
Modify signals
- set [set(value: T): void] for replacement (set the signal to a new value, and notify any dependents)
count.set(3);
- update[update(updateFn: (value: T) => T)] for deriving a new value (Update the value of the signal based on its current value, and notify any dependents), The update operation uses the set() operation for performing updates behind the scenes.
// Increment the count by 1.
count.update(value => value + 1);
- mutate [mutate(mutatorFn: (value: T) => void)] for performing internal mutation of the current value (Update the current value by mutating it in-place, and notify any dependents)
const todos = signal([{title: 'Learn signals', done: false}]);
todos.mutate(value => {
// Change the first TODO in the array to 'done: true' without replacing it.
value[0].done = true;
});
Side effects on Signal – effect()
Sometimes, when a signal has a new value, we may need to add a side effect. To accomplish this, we can use the effect() function.
Effect schedules and runs a side-effectful function inside a reactive context.
The function inside the effect will re-evaluate with any change that occurs in the signals called inside it. Multiple signals can be added to the effect function.
computed()
What if there is another value that depends on the values of other signals, and needs to be recalculated whenever any of those dependencies changes?
In this case, we can use a computed() function to create a new signal that automatically updates whenever its dependencies change.
const count: WritableSignal<number> = signal(0);
const doubleCount: Signal<number> = computed(() => count() * 2);
*DEMO CODE by @deborahk *: https://stackblitz.com/edit/angular-signals-deborahk?file=src%2Fmain.ts
If you like my work and want to support me to work hard, please donate via:
Revolut website payment or use the QR code above.
Thanks a bunch for supporting me! It means a LOT ๐
