Angular › Angular Signals

What is a signal in Angular and how does it help manage a component's data?

Beginner

Answer

A signal is a wrapper around a value that notifies Angular exactly when that value changes, letting Angular update only the specific parts of the page that actually depend on it. You create a signal using the signal function, read its current value by calling it like a function, and update it using its set or update methods.

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

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

Real-world example A counter component displays and updates its count using a signal, and Angular automatically knows exactly when to refresh just that piece of text on the screen, without needing to check the entire component for changes.

Common follow-ups: How is reading a signal's value, using count with parentheses, different from reading a regular property?;What is the difference between the set method and the update method on a signal?

Change Detection;Zoneless Change Detection & Zone.js