Why signals are introduced in Angular

Introduction

Signals help Angular track changes in data easily and update the screen quickly. They make apps faster and simpler to build.

When you want your app to update parts of the screen automatically when data changes.

When you want to write cleaner code that reacts to changes without extra work.

When you want better performance by updating only what really needs to change.

When you want to avoid complex state management and make your app easier to understand.

Syntax

Angular

import { signal } from '@angular/core';

const count = signal(0);

count.set(1); // update value
const current = count(); // read value

Use signal(initialValue) to create a signal with a starting value.

Call the signal like a function count() to get its current value.

Examples

Create a signal for a name and update it. Reading the signal gives the current name.

Angular

const name = signal('Alice');
console.log(name()); // prints 'Alice'
name.set('Bob');
console.log(name()); // prints 'Bob'

Use update to change the signal value based on the old value.

Angular

const counter = signal(0);
counter.update(value => value + 1);
console.log(counter()); // prints 1

Sample Program

This Angular component uses a signal to keep track of a counter. When you click the button, the counter increases and the screen updates automatically.

Angular

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <h1>Counter: {{ counter() }}</h1>
    <button (click)="increment()">Add 1</button>
  `
})
export class CounterComponent {
  counter = signal(0);

  increment() {
    this.counter.update(value => value + 1);
  }
}

Important Notes

Signals replace some complex change detection methods with a simpler reactive approach.

They help Angular know exactly what changed, so it updates only those parts of the UI.

Signals work well with Angular's new standalone components and modern patterns.

Summary

Signals make it easy to track and react to data changes.

They improve app speed by updating only what is needed.

Signals simplify writing reactive Angular code.