Angular Signals

Angular Signals are a state management feature. It is used to simplify change detection, improve performance, and make Angular applications more predictable and easier to debug.

When a signal variable’s value changes, then Angular automatically updates the UI.

What is the benefit of Angular Signals?

1. Reducing unnecessary change detection.

2. Preparing Angular for a zone-less future (without Zone.js).

3. Automatic UI updates.

4. Better Performance

How to create a Signal?

To create a signal, you have to use the signal() function

import { signal } from '@angular/core';
count = signal(0);

In this example, I have created a count variable with a default value of 0.

How to get a Signal variable’s value?

You have to get the signal variable’s value through the signal variable name as a function. Suppose you have a count signal variable, then you need to get through count().

Example:

console.log(this.count()); // output: 0

How to Update a Signal?

We can update the signal through the set() or update() method.

Update Signal using the set() method

Suppose, you have to update the count value from 0 to 5 using the set() method.

this.count.set(5); //update value 5
this.count(); // get the count variable's value is 5

Update Signal using the update() method

Suppose, you have to update the count value from 0 to 5 using the set() method.

this.count.update(value => value + 5); //update value 5

Use Signals in Angular Templates

Suppose, you have to use a signal in an Angular template file.

Count: {{ count() }}

Example: Counter App Using Signals

@Component({
selector: 'app-counter',
template: `<h2>Count: {{ count() }}</h2>
<button (click)="increment()">+</button>`,
standalone: true
})
export class CounterComponent {
count = signal(0);

increment() {
this.count.update(v => v + 1);
}
}

Signals vs RxJS Observables

Angular Signals – Interview Questions

Angular Signals – Objective Questions (MCQs)