Angular Signals

Introduction

Angular Signals are one of the most significant additions to Angular’s reactive programming model. It is introduced in Angular 16.

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 are Angular Signals?

A Signal is a reactive container that stores a value. Whenever the value changes, Angular automatically updates every part of the application that depends on that Signal.

Example:

import { signal } from '@angular/core'; 
const count = signal(0); 
console.log(count()); 
count.set(5); 
console.log(count());

Output:

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:

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(); 

Output:

Update Signal using the update() method

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

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

Output:

Use Signals in Angular Templates

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

Count: {{ count() }}

Types of Angular Signals

Angular provides three important reactive APIs:

1. Writable Signals
2. Computed Signals
3. Effects

1. Writable Signals

Writable Signals store values that can be modified.

Example:

import { signal } from '@angular/core'; 
const age = signal(35); 
age.set(36);

2. Computed Signals

Computed Signals derive values from other Signals.

Example:

import { signal, computed } from '@angular/core'; 
const price = signal(500); 
const tax = signal(100); 
const total = computed(() => price() + tax()); 
console.log(total());

Output:

Whenever price or tax changes, the total updates automatically.

3. Effects

Effects execute code whenever dependent Signals change.

Example:

import { effect } from '@angular/core'; 
effect(() => { 
console.log('Counter:', count()); 
});

Effects are useful for:

1. Logging
2. API calls
3. Local storage
4. Analytics
5. Side effects

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);
}
}

Common Mistakes

Avoid these common mistakes:

1. Forgetting to call Signals with ().
2. Using effect() for calculations instead of computed().
3. Mutating objects or arrays directly without updating the Signal.
4. Replacing every Observable with a Signal.
5. Storing unrelated state inside a single Signal.

Signals vs RxJS Observables

Feature	Signals	Observables
Complexity	Simple	Moderate to High
Async Streams	❌	✅
Change Detection	Fine-grained	Global
State Management	Excellent	Possible
Learning Curve	Easy	Steeper

Angular Signals – Interview Questions

Angular Signals – Objective Questions (MCQs)

Conclusion

Angular Signals represent a modern approach to reactive state management in Angular applications. Signals are excellent for managing local UI state, they are designed to complement—not replace—RxJS.

Related Angular Signals Tutorials