Introduction

Hello readers! Today we are going to learn about signal in angular and how we can use them in our angular application. So lets get started.

What are Signals?

Signals basically provide a new way to tell our html templates or your typescript code that there has been some change in the data. This way we improve our change detection mechanism making our code more reactive and thereby improving performance. Signals were introduced with angular version 16. A signal can have any value be it primitive type or non primitive.

To better understand it, just consider signal as a wrapper around a value that can notify interested consumers that the value has changed.

Lets see how we can create them.

Creating a signal

const x = signal(1)

Just like that we can create a signal. Here we have created a variable x which will be a signal with default value as 1. We can also mention the type for it.

const x = signal<number>(1)

Now we have specified the type for the signal as well. This type is although optional to mention.

const z = signal([1,2,3,4,5])                     //Defining an array as signal

const product = signal<Product[]>([])     //Here Product is some interface

Reading a signal

Now when we have created some signals, we will have to read its value which is as easy as creating them. To get the value of variable x we will write as:

x()                         //1

Just write the signal name followed by parantheses.

Suppose you want to loop through z variable values in your template.

<div *ngFor="let value of z()">

    <span>{{value}}</span>

</div>

Changing the value of Signals

To replace the signal value with a new value, you can use the set function.

thix.x.set(5)

This will replace value of x variable with 5

This is the first function to replace the value. Besides this, we also have two other functions which are mutate() and update().

You can use the update function when you want to update the signal value based on its current value. For example we want to triple the value of x variable we can write as:

this.x.update(value => value*3)

You can use the mutate function when you want to array elements or you want to modify some object properties. This is how you can use it

this.object.mutate(item => item.quantity = item.quantity*2)

Effects

Sometimes you may want to run a code when a signals value changes and that code has side effects. You may want to call an api or do some operation not related to signal. So in such scenarios you can use effect.

To create an effect, we use the effect() function. We can call this function within another function as well and will be called every time the code reacts to changes in the signal.

Here is how we can use this function:

effect(() => console.log("Running from effect function"))

We should not use effects for changing any value of the signals. If you want to do that, then you should use computed signals. You will use effects mostly for logging or calling some external apis.

Computed Signals

Computed Signals are those signals which get their values from a different signal. These signals are basically used to deal with calculated values. Let us understand with this example:

quantity = signal(4);

price=signal(10)

total=computed(() =>this.price() *this.quantity())

Conclusion

Signals represent a major change in Angular’s reactive programming. In this blog, we have seen how we can create signals and read those values or update them. We also saw computed signals and when to use them. So just go ahead and try it. Make sure you are using Angular version 16 to try out signals.

Finally, for more such posts like this, please follow our LinkedIn page- FrontEnd Competency. OR have a look at such blogs here.