Signals are a new feature introduced in angular 16. signal is a wrapper around a value that’s linked to alerts or notifications that are shared amongst participants when that value changes. With the help of Signals in Angular, the framework is able to minimize rendering changes by keeping track of exactly where and how your state is used throughout an application.
Any type of data structure can be present in a signal. It might be as basic as a string or as complex as a graph.
Why do we need Signals in angular?
A component-based architecture is implemented in the creation of Angular apps, where each component stands for a certain feature or functionality. Since an Angular application is a tree of components, even a minor modification may necessitate a change detection cycle and the checking of updates by every component in the DOM tree. The framework examines each element in the tree to determine whether or not its state has changed and whether the new state has an impact on the view when change detection begins. If so, the component’s DOM portion that is impacted by the modification is updated.
The application’s speed is greatly impacted by this capability, which performs tasks that might not be required given that the event may not have an influence on most components. As you can expect, there are several redundant processes and pointless checks carried out internally.
All of that is a result of zone.js and the way the current change detection is implemented. In general, zone.js is used by 98% of Angular applications. Additionally, Angular “monkey-patches” the event using zone.js because it lacks a mechanism to determine which component is being modified. In order to determine where the change occurred and which nodes require modifications, it examines and contrasts every component. However, as you can expect, a larger application necessitates more checks and updates, which gradually slows down the process.
We can optimize the application’s performance by changing the change detection strategy in component by using the OnPush strategy. However, this approach requires a careful attention.
This is where angular signals come into play. By using Angular signals, we can fully eliminate zone.js from the applications and disregard the changeDetection technique. Signals are excellent at identifying the location of changes and are aware of subscribers.
Change detection will therefore only update the impacted components; in other words, signals remain totally separate from the component tree, and changes only occur in the components that are subscribers to the signal that is being altered. As a result, the process is optimized and fewer checks are required, which lowers performance expenses.
How to implement signals in angular?
Signals can be read-only or writable.
Writable signals offer a direct update API for their values. By using the signal function with the signal’s initial value, you can generate writable signals.
const count = signal([{ name: 'Jacket', price: 10 },
{ name: 'Shoes', price: 15 },
{ name: 'Goggle', price: 20 }
]);whereas A read-only signal derives its value from other signals.
const count = signal([{ name: 'Jacket', price: 10 },
{ name: 'Shoes', price: 15 },
{ name: 'Goggle', price: 20 }
]);
Const dupCount = computed(() => { this.itemList().push(
{ name: 'Watch', price: 15 }
);
this.itemList.update(this.itemList);});
read-only signals are not writable signals You cannot directly assign values to a read-only signal. That produces a compilation error.
Signals method.
The signal function returns a Writable Signal. Signal are a getter function, but the type Writable Signal give us the possibility to modify the value by three methods as mention below :
set(), update() or mutate().
Here’s you can download the sample code and take your understanding to the next level: