What is Singal?
Signals is a new reactive primitive of angular. Reactive Primitive means it returns a function which value is always recalculating whenever there is any update on its dependencies. It means we can say that signals is a new type of property in which we can store a value. But its not a normal property. Its a reactive property. Whenever its value is updated it notify to its subscribers. Means wherever this signal property has been used, there automatically this change reflects. It means
Signal => Property + "Change Notification"
Before moving to the benefits of signals lets understand the little bit about change detection and zone.js that how angular detects any changes and update the view. For example we change any property in ts file then that change reflect in our view file(html file) as well. So it called as Angular change detection. For this angular uses zone.js library.
As you know angular is a component based architecture. So zone.js is used to detect the changes. Whenever there is any update on app its triggers the change detection. Then it checks for all the component trees and the impacted area. Then according to that view has been updated. So if there is any small change detect then it checks for all component tree, due to that the performance of the app is impacted.
For Example: If you have ordered online something. But that delivery person don’t have your address. So he will go in each home in your area and he will ask about the order for that person. He will find the address finally but he disturbed everyone. Which is actually not needed if he has a particular address then.
Benefits of Signals
- As we have seen above if there is any change detects , there are multiples checks happens. But with the help of signals these unnecessary checks can be avoided. And only the particular part of the app will be change where exactly it impacts.
- It trigger the update whenever necessary. Unnecessary it don’t check the component tree. Due to that number of cycles of change detection is reduce and its performance is increases.
How to Use Signals
If you are already having any angular project then use the below command to work with Signals.
ng update @angular/cli @angular/core --next
But will recommend to use signal with new angular app. So below is the command to create the new app.
npx @angular/cli@next new signal-project
See the below example-
Using the above command we have created the angular project with signals.
Now we have created one separate component i.e signal.component.html and signal.component.ts
Insert the below code in signal.component.html
<div class="card" style="width: 18rem;">
<div class="card-header">
Signal Example
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><input type="text"[value]="firstName()"#fname><br> {{firstName()}}</li>
<li class="list-group-item"><input type="button"(click)="changeFirstName(fname.value)"value="Change First Name"></li>
<li class="list-group-item"><input type="text"[value]="lastName()"#lname><br>{{lastName()}}</li>
<li class="list-group-item"><input type="button"(click)="changeLastName(lname.value)"value="Change Last Name"></li>
<li class="list-group-item">FullName : {{fullName() }}</li>
</ul>
</div>
In signal.component.ts
import { Component, computed, signal } from '@angular/core';
@Component({
selector:'app-signal',
templateUrl:'./signal.component.html',
styleUrls: ['./signal.component.scss']
})
export class SignalComponent {
firstName: any = signal('Triveni');
lastName: any = signal('Yadaw');
fullName: any = computed( () =>this.firstName() + ' ' + this.lastName());
changeFirstName(fname: any) {
this.firstName.set(fname);
}
changeLastName(lname: any) {
this.lastName.set(lname);
}
}
In the code we have used the signal to set the initial value of first name and last name. And computed to set the full name property.One important point is here that we need to use the parentheses () with the properties because we are using the signals. So every time when we will change the value of first name and last name it automatically update the full name as well. signal and computed is used from the @angular/core library.
Lets see the output on browser:
In the output you can see the initial value is displaying. If we will change the first name and last name then full name will also change. Lets see the below output.
It means computed signal always change when the properties value has been change. Signal value is change based on its current value. Similarly we can use signals for numbers also. For example addition, subtraction etc.Which we see in next article.
Visit More:
