SIGNAL in Angular

With Change detection, incase of any change in one of the components, it check for all the components and then render the view. This leads to performance issue.

?Our code can be more reactive with signal in Angular.

What is signal ?

• Signal always has a value
• Signal is called as Reactive Primitive

Command to install its dependency in the existing project :

? ng update @angular/cli??@angular/core --next

Creating a Signal?

variableName = signal(value);

Eg: firstName = signal('New feature');

Including type?

firstName = signal<string>('New feature');

qnty = signal<number>(12);

string interpolation in html : {{ firstName() }}

set the value :

Set method replaces the value of a signal with new value.

Eg: firstName.set('Available in updated version')

Compute:

Whenever there is any change in either firstName or lastName, fullName will be updated.

fullName = computed(()=> this.firstName() + ' ' + this.lastName())?

Apart from set, we have 2 other ways to change the value of signal

• Update
• Mutate

Update:

Updates based on current value

Eg: this.qnty.update( qty => qty*2);

Mutate:

Mutate modifies the content of the signal but not its whole value. It modifies any of the array element or property value in the array of objects.

This has been added in Angular 16 version. It improves the performance drastically.