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.

Let's take a look at how this new feature works, its syntax, and how to use it once it's fully rolled out.

What Are Signals?

The signal type is Angular's new reactive primitive type. Its purpose is to hold a value, just like a standard variable, but the distinguishing feature of a signal is its unique behavior. If a signal changes, it will notify anything that depends on it.

Additionally, Angular can use signals as the new approach for detecting and triggering change, rather than the current default approach of dirty checking the entire component tree.

Diagram illustrating the old method for checking changes vs. the Signals approach

How to Use Signals in Angular

A signal will look something like this:

        @Component({
  selector: 'my-app',
  standalone: true,
  template: `
    <div> Count: {{ count() }} </div>
    <div> Double: {{ double() }} </div>
    <button (click)="changeCount()"></button>
  `,
})

export class AppComponent{
  count = signal(0)
  double = computed(() => this.count() * 2);

  changeCount() {
    this.count.set(5)
  }
}

In this App component, the variable count is a signal initialized with the value zero. count is then referenced inside double (a computed value) and the template. So, when the button click sets the value of count to five, both the computed value (double) and the values in the template will update.

Every part of the Angular component that depends on the signal will be automatically updated once the value changes.

Why the Introduction of Signals Is Important

Signals make it easier to learn and work with Angular. Switching to signals as the new default way to learn and build with Angular will harmonize the learning process. Whether we prefer a more imperative style of coding with Angular, or want to learn a more declarative style of coding.

Most people begin coding imperatively because it's generally more intuitive and familiar to people. But switching from the imperative approach to the declarative way involves a paradigm shift and a total change in our mental model. This is why RX.js, the reactive library, is difficult to learn for many.

Signals will bring these two separate approaches together. Everyone can learn signals by default, start learning the concepts behind reactivity, and not even worry about incorporating Angular's RX.js if they can't or don't want to.

Once you're comfortable with the basics of Angular and want to switch to a more declarative coding style, you can easily add RX.js to the concepts you already understand.

Signals Should Improve Angular Programming for Everyone

Signals is Angular's new reactive mechanism that you can use to create reactive values for consumers to read. A signal immediately notifies all consumers once its value changes. Signals harmonize the learning process of Angular by bringing together the imperative and declarative approaches to coding.

Angular will rely on signals to make change detection more lightweight and robust. Therefore, as an Angular developer, learning to use signals will give you a firmer grasp of reactivity in Angular and make you a better developer. Don't forget to master the basics of Angular before learning the more advanced parts.