Signals as modern state primitive in Angular

Introduction

Signals help keep track of changing data in your app simply and clearly. They make your app update automatically when data changes.

When you want to store and react to simple data changes like a counter or form input.

When you want your UI to update automatically without writing extra code.

When you want to avoid complex state management and keep code easy to read.

When you want to share reactive data between components easily.

When you want to improve performance by updating only what changes.

Syntax

Angular

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

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

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

The signal function creates a reactive value that you can read by calling it like a function.

Use update to change the signal's value based on its current value.

Examples

Creating a signal with initial value 0, reading it, then setting it to 5.

Angular

const count = signal(0);
console.log(count()); // 0
count.set(5);
console.log(count()); // 5

Signal holding a string value that changes from 'Alice' to 'Bob'.

Angular

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

Using update to add 5 to the current score.

Angular

const score = signal(10);
score.update(current => current + 5);
console.log(score()); // 15

Signal can hold any type, including null for empty state.

Angular

const emptySignal = signal(null);
console.log(emptySignal()); // null

Sample Program

This component uses a signal to keep track of how many times the button is clicked. Each click updates the signal, and the UI updates automatically.

Angular

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

@Component({
  selector: 'app-click-tracker',
  standalone: true,
  template: `
    <button (click)="trackClick()">Click me</button>
    <p>You clicked {{ clicks() }} times.</p>
  `
})
export class ClickTrackerComponent {
  clicks = signal(0);

  trackClick() {
    this.clicks.update(currentClicks => currentClicks + 1);
  }
}

// When the button is clicked 3 times, the displayed text updates automatically to:
// You clicked 3 times.

Important Notes

Signals update synchronously and immediately notify any part of the app that uses them.

Time complexity for reading or updating a signal is O(1).

Common mistake: forgetting to call the signal as a function to read its value (e.g., use count() not count).

Use signals for simple, local state. For complex shared state, consider Angular's other state management tools.

Summary

Signals are simple reactive values that update your UI automatically.

Use signal() to create, call the signal like a function to read (e.g., count()), and set() or update() to change values.

They help keep your code clean and your app responsive.