How Signals Can Boost Your Angular Performance

Angular is a popular framework for building web applications, but it also comes with some challenges. One of them is how to manage state changes and update the view efficiently. Angular uses a change detection mechanism that runs every time an event occurs, such as a user interaction, a timer, or an HTTP request. This can lead to performance issues, especially for complex applications with many components and data bindings.

To solve this problem, Angular introduces a new feature: Signals. Signals are a way to wrap values that can change over time and notify interested consumers when they do. Signals can contain any value, from simple primitives to complex data structures. A signal’s value is always read through a getter function, which allows Angular to track where the signal is used. Signals may be either writable or read-only.

Benefits of Signals

Signals offer several advantages over the traditional way of managing state in Angular. Here are some of them:

• Granular change detection: Signals allow Angular to know exactly which parts of the application depend on which signals, and only update those parts when the signals change. This reduces the amount of unnecessary rendering and improves performance.
• Reactive programming: Signals enable a declarative and reactive style of programming, where you can define how your state is derived from other signals, and let Angular handle the updates automatically. This makes your code more readable, maintainable, and testable.
• Easy debugging: Signals make it easy to inspect and manipulate the state of your application at any point in time. You can use the Angular DevTools extension to view the current values of your signals, and even change them on the fly to see how your application reacts.

How to Use Signals

To use signals in your Angular application, you need to import signal from the @angular/core module and use the provided functions to create and manipulate signals. Here are some examples of how to use signals:

• Writable signals: Writable signals provide an API for updating their values directly. You create writable signals by calling the signal function with the signal’s initial value:

import { signal } from "@angular/core";

...

countSignal = signal(0); // Signal values can be anything, including objects and arrays.

// Signals are getter functions - calling them reads their value.
console.log("The count is: " + countSignal());

// To change the value of a writable signal, you can either .set() it directly:
countSignal.set(3);

// or use the .update() operation to compute a new value from the previous one:
// Increment the count by 1.
countSignal.update((value) => value + 1);

• Computed signals: A computed signal derives its value from other signals. Define one using computed and specifying a derivation function:

import { signal, computed } from "@angular/core";

...

countSignal = signal(0);
doubleCount = computed(() => this.countSignal() * 2);

// The doubleCount signal depends on count. Whenever count updates, Angular knows that anything which depends on either count or doubleCount needs to update as well.

increment(qty = 1) {
  this.countSignal.update((value) => value + qty);
}

• Binding signals to templates: You can use signals in your templates just like any other expression, by using the {{ }} interpolation syntax or the [ ] property binding syntax. Angular will automatically update the view when the signals change:

<div>
  <h1>Current Count: {{ countSignal() }}</h1>
  <h1>Doubled Count: {{ doubleCount() }}</h1>
  <button (click)="increment()">Increment</button>
</div>

Signal template updates currently require the use of changeDetection: ChangeDetectionStrategy.OnPush in the component. Stack Overflow Explanation

Conclusion

Signals are a powerful feature that can help you write more performant, reactive, and maintainable Angular applications. They are currently available as an experimental feature in Angular 16, and you can try them out by following the Angular Signals guide. If you want to learn more about signals, you can also check out these resources:

• Angular Signals: Complete Guide
• Introduction to Angular Signals
• Signals in Angular – How to Write More Reactive Code

I hope you enjoyed this article and found it useful. If you have any questions or feedback, please let me know. 😊