Angular and Signals - Everything You Need To Know

Angular 16 is Coming and Here’s What You Need To Know About The New Feature

Everyone is getting obssesed over Signals. Coming soon in Angular 16, signals is the new way to do reactive state management. But what does it really mean? How does it work? And why does it matter?

Let's dive in.

What is in Reactive State Management?

Reactive state management is a way of keeping track of what's happening in an application and making sure everything stays up-to-date. Think of it like a big whiteboard where you write down all the important information about your application. Whenever something changes, like a user clicking a button or new data coming in, you update the whiteboard to reflect the new information.

The "reactive" part comes in because the application is constantly reacting to changes and updating the whiteboard accordingly.

Using reactive state management can help make applications more responsive and easier to use, because the application is always keeping track of what's happening and updating itself accordingly. It can also help make development easier and more organized, because all the important information about the application is stored in one place.

How Angular currently deals  with reactive state management

In Angular, when you build a web application, you need a way to keep track of all the things that are happening in the application, like user clicks or data changes. Reactive state management is a way of doing that.

Angular uses a library called RxJS, which helps the application detect changes and update the view (what the user sees on the screen) in response. It's like having a system that can "listen" to what's happening in the application, and automatically update the view accordingly.

Additionally, Angular provides a built-in library called NgRx, which makes it easier to manage the state of the application. It helps keep track of all the different pieces of data in the application, and makes sure that they are updated correctly in response to user actions or other events.

Let's say we have a component that displays a list of products. We want to make it so that when the user clicks on a product, the product is highlighted in the list. Here's how we might use RxJS to do that:

First, we create an observable that emits events whenever a product is clicked:

import { Subject } from 'rxjs';

export class ProductListComponent {
  productClicked = new Subject<string>();

  onProductClick(productId: string) {
    this.productClicked.next(productId);
  }
}

Here, we're using the Subject class from RxJS to create an observable called productClicked. We also have a method called onProductClick that gets called whenever a product is clicked. This method calls next on the productClicked observable, which emits an event with the ID of the product that was clicked.

Next, we subscribe to the productClicked observable in the template of our component, and use it to update the CSS classes of the products in the list:

<ul>
  <li *ngFor="let product of products"
      [class.selected]="product.id === selectedProductId"
      (click)="onProductClick(product.id)">
    {{ product.name }}
  </li>
</ul>

Here, we're using Angular's ngFor directive to loop over the list of products and create an li element for each one. We're also using the class binding to dynamically add the selected class to the li element if the product.id matches the selectedProductId. Finally, we're using the (click) event binding to call onProductClick whenever a product is clicked.

Now, whenever a user clicks on a product, the productClicked observable emits an event with the ID of the product that was clicked. We use this event to update the selectedProductId property in our component, which in turn updates the CSS classes of the products in the list. This way, the selected product is highlighted, and the user can see which product they clicked on.

This is just a simple example, but it demonstrates how we can use RxJS and reactive state management to create dynamic and responsive user interfaces in Angular.

How does signals change this?

In Angular, reactive state management is currently done through observables and the RxJS library. Observables provide a way to handle asynchronous streams of data in a declarative way.

Signals, on the other hand, are a new feature that is being introduced in Angular to enable fine-grained reactivity. Signals provide a way to model fine-grained dependencies and notify components and templates when a particular value has changed. This means that Angular can now track changes at a more granular level and trigger updates only where necessary, resulting in better performance.