DEV Community

Cover image for Angular Signals: The Secret Weapon for Writing Reactive and Performant Applications
chintanonweb
chintanonweb

Posted on • Updated on

Angular Signals: The Secret Weapon for Writing Reactive and Performant Applications

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.
});
Enter fullscreen mode Exit fullscreen mode

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.
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
pbouillon profile image
Pierre Bouillon

This is wrong, I think you are confusing signals (Angular) and Subjects (RxJS)

The main purpose of signals is to be synchronous and not require developers to subscribe to their value, you can simply call the getter:

// ๐Ÿ‘‡ Create a signal with its initial value
const count = signal(0);

// ๐Ÿ‘‡ Set the count to 1
count.set(1);

// ๐Ÿ‘‡ Set the count to 2 by incrementing the current value
count.update(current => current + 1); 

// ๐Ÿ‘‡ Get the current value by calling the getter
console.log('The count is: ' + count());
Enter fullscreen mode Exit fullscreen mode

I highly recommand you to check the signals' documentation to see the core differences with an RxJS Subject