What are Angular Signals and how will they improve your development?

Reactive state without RxJS overhead

Outdated: Written in April 2023. The mutate() method was removed from Angular signals in Angular 17; use update() instead. Signals have since become stable, and computed() and effect() are part of the API. The post is kept as an archive; the code may not run on current versions.

Angular is a popular JavaScript framework used for building web and mobile applications. It provides a variety of features to make development easier and faster. One of the newest features of Angular is signals, which allow for more reactivity in our code. This post will explain what signals are, how they differ from observables, and why you should consider using them.

Before we look at what signals are, let's start with why we need them. In traditional JavaScript code, values are assigned to variables and remain static until changed. This is fine for some use cases, but it becomes problematic when we want our variables to react to changes.

For example, if we're building an e-commerce website, we want the user interface to react to changes in the quantity of items in the shopping cart. We don't want to wait for the page to reload every time the user adds or removes an item. Signals provide a solution to this problem.

A signal is a special type of variable that holds a value and provides a change notification. You can think of it as a box that holds a value and glows when that value changes. To read the value of a signal, we call the signal's getter function using parentheses.

Signals are synchronous, which means reading a signal returns its current value right away and a new value is visible as soon as it is set. This makes them different from observables, which are used for asynchronous operations like HTTP requests. Signals can be used anywhere in your code to track local state, share state across components, or display values in a template.

They are essentially variables with built-in change detection, meaning that any changes to a signal will automatically trigger updates to any views or components that depend on that signal. Signals are synchronous and have a simple syntax, making them easy to use and understand. RxJS Subjects, on the other hand, are part of the larger RxJS library, which provides a powerful set of tools for reactive programming. Subjects are essentially event emitters, which allow you to send data to multiple subscribers in an asynchronous way.

To create a signal, we use the signal() constructor function. We can pass in a default value for the signal and optionally specify its data type. For example:

const quantity = signal<number>(1);

This creates a signal named quantity with an initial value of 1 and a data type of number. If we want to change the value of the signal, we can use its set() method:

quantity.set(2);

We can use the update() method to update the value of the signal based on the current value. The update function will use the set() method to update the value of the signal:

quantity.update((value) => value + 1);

For internal mutation of the signal, we can use the mutate() method. This will update the current value of the signal by mutating the value directly. For example:

const items = signal<{ name: string; price: number }[]>([]);

items.mutate((list) => {
  list.push({ name: 'Apple', price: 1.99 });
});

Signals improve Angular's change detection by providing more reactivity in our code. When a signal changes, any values computed from that signal will automatically recalculate. If a signal is bound in a template, Angular's change detection will update any views that read the signal.

As a full-stack software engineer, I have extensive knowledge of Angular. I can help you build your first MVP using Angular Signals, as well as other features of the Angular framework. Whether you're a non-technical founder or an experienced developer, I can assist you in creating a responsive and reactive web application.