Introduction:
Angular Signals is a new feature introduced in Angular 16 that makes it easier to write reactive code and improve the performance of your Angular applications. Signals are a primitive that allows you to track changes to data and notify interested components when those changes occur.

This article will provide a deep dive into Angular Signals, including how they work, how to use them, and their benefits.

What are Angular Signals?
Angular Signals are a reactive primitive that allows you to track changes to data and notify interested components when those changes occur. Signals are essentially a stream of values, and they can be used to represent any type of data, from simple primitives to complex objects.

Signals are created using the Signal() constructor. Once a signal is created, you can subscribe to it using the subscribe() method. When you subscribe to a signal, you will be notified whenever the signal's value changes.

How to use Angular Signals
To use Angular Signals, you first need to create a signal. You can do this using the Signal() constructor. Once you have created a signal, you can subscribe to it using the subscribe() method.

When you subscribe to a signal, you will be notified whenever the signal's value changes. You can do this by providing a callback function to the subscribe() method. The callback function will be invoked whenever the signal's value changes, and it will be passed the new value of the signal as an argument.

Here is an example of how to create and subscribe to a signal:

const signal = new Signal<number>();

signal.subscribe((value) => {
  // Do something with the new value of the signal.
});

You can also unsubscribe from a signal at any time by calling the unsubscribe() method.

Benefits of using Angular Signals

There are several benefits to using Angular Signals:

Improved performance: Angular Signals can improve the performance of your Angular applications by reducing the number of change detection cycles that are required.

Easier to write reactive code: Angular Signals make it easier to write reactive code by providing a simple and declarative way to track changes to data.

More modular code: Angular Signals can help you to write more modular code by decoupling components from each other.
Using Angular Signals in components

Angular Signals can be used in components to track changes to data and notify other components when those changes occur.

To use Angular Signals in a component, you first need to inject the Signal class. Once you have injected the Signal class, you can create signals and subscribe to them within your component.

Here is an example of how to use Angular Signals in a component:

import { Component, OnInit } from '@angular/core';
import { Signal } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private signal: Signal<number>) {}

  ngOnInit(): void {
    this.signal.subscribe((value) => {
      // Do something with the new value of the signal.
    });
  }
}

Using Angular Signals in services
Angular Signals can also be used in services to track changes to data and notify other components when those changes occur.

To use Angular Signals in a service, you first need to inject the Signal class. Once you have injected the Signal class, you can create signals and subscribe to them within your service.

Here is an example of how to use Angular Signals in a service:

import { Injectable } from '@angular/core';
import { Signal } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {

  constructor(private signal: Signal<number>) {}

  public updateValue(value: number): void {
    this.signal.next(value);
  }

  public subscribeToSignal(callback: (value: number) => void): void {
    this.signal.subscribe(callback);
  }
}

Conclusion

Angular Signals are a powerful new feature that can make your Angular applications more reactive, performant, and modular. If you are developing Angular applications, I encourage you to learn more about Angular Signals and how to use them in your code.