Angular Signals: A Practical Guide for Real Apps

Signals are reactive primitives for state in Angular. You define a signal() for writable state, computed() for derived values, and effect() for side effects.

Core API

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

const count = signal(0);
const doubled = computed(() => count() * 2);

effect(() => {
  // runs whenever count or doubled changes
  console.log('Count:', count(), 'Doubled:', doubled());
});

count.set(1);
count.update((n) => n + 1);

Component Example

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

@Component({
  selector: 'app-cart',
  standalone: true,
  template: `
    <button (click)="add()">Add</button>
    <p>Total items: {{ total() }}</p>
  `
})
export class CartComponent {
  private items = signal<number[]>([]);
  total = computed(() => this.items().length);
  add() { this.items.update((xs) => [...xs, Date.now()]); }
}

When to Prefer Signals

• Local UI state in a component.
• Derived/calculated values without manual subscriptions.
• Avoiding over-render: Signals update only consumers.

Tips

• Keep effects small and idempotent.
• Use computed() for any derived value to avoid duplication.
• Still use a store (e.g., NgRx/ComponentStore) for app-wide or server cache state