What is signals in Anglaur 16?Example

Angular has introduced a new feature called signals, which provides a way for code to notify templates and other code when data changes. This enhancement improves Angular's change detection mechanism, leading to better performance and more reactive code.

As Angular v16 is released on May 2023 and developers can try out this powerful feature. Let's try to understand what exactly are Signals,

To understand the motivation behind signals, let's consider a simple example without signals. Suppose we have code that performs basic math operations:

typescript
let x = 7;
let y = 2;
let z = x + y;
console.log(z);

In this case, the value of z is 9. After a few lines of code, we changed the value of x 

typescript
let x = 7;
let y = 2;
let z = x + y;
console.log(z);
x = 10;
console.log(z);

If we log the z value now what is it going to log out on the console? Of course, it will log out 9 only. In this case, the value of z is 9 because it is assigned the value when the expression is first evaluated. The variable z does not react to changes in x or y.

With signals, we can make our variables reactive. For instance, the above example using signals would look like this:

typescript
const x = signal(7);
const y = signal(2);
const z = computed(() => x() + y());
console.log(z()); // 9

x.set(10);
console.log(z()); // 12 (x + y)

In the code above, x and y are defined as signals with initial values of 7 and 2, respectively. The z signal is computed based on the values of x and y. Whenever x or y signals change, the computed z signal automatically recalculates its value. This approach makes the code reactive.

Computed signals recalculate whenever any of their dependent signals change. When a signal is bound in a template, Angular's change detection automatically updates the view when the signal changes, ensuring that the user sees the updated values.

So why do we need signals? Here are a few reasons:

1. Signals provide more reactivity in our code.
2. Using signals allows for finer control over change detection, leading to improved performance.

Now, let's go deeper into what signals are and how to use them.

A signal can be thought of as a value with a change notification. It is a special type of variable that holds a value and notifies when the value changes. Metaphorically, a signal can be seen as a box that contains the value and glows when the value changes. To read the value of a signal, we use parentheses: x().

Key characteristics of signals include:

• A signal is a variable with a change notification.
• Signals are reactive and referred to as "reactive primitives."
• Signals always have a value.
• Signals are synchronous and not a replacement for RxJS and Observables for asynchronous operations.

Signals can be used in various contexts, including components, directives, services, templates, and other parts of the code.

Also, Read:

1. Angular 16 & 17 — game changer or loss of identity?

2. What is Hydration in angular 16?

3. Angular 15 new features list

Happy Coding Happy Learning !!!