angular-signals-and-state

Core signal primitives

Prefer signals for local and shared synchronous state. Use signal() for mutable values, computed() for derived values that auto-update, and effect() only for side-effects that cannot be expressed reactively (e.g., writing to third-party DOM APIs).

BAD — class properties with manual change notifications

@Component({ changeDetection: ChangeDetectionStrategy.OnPush })
export class CartComponent {
  items: Product[] = [];          // plain array — no reactive tracking
  total = 0;

  addItem(p: Product) {
    this.items = [...this.items, p];
    this.total = this.items.reduce((s, x) => s + x.price, 0);  // manual sync
    this.cdr.markForCheck();       // manual notification
  }
}

GOOD — signals with derived computed value (Angular 17+)

@Component({ changeDetection: ChangeDetectionStrategy.OnPush })
export class CartComponent {
  items = signal<Product[]>([]);
  total = computed(() => this.items().reduce((s, x) => s + x.price, 0));

  addItem(p: Product) {
    this.items.update(list => [...list, p]);  // computed() updates automatically
  }
}

---

Signal inputs and outputs (stable Angular 19; developer preview 17.1)

BAD — decorator-based @Input with ngOnChanges

@Component({})
export class PriceComponent {
  @Input() price = 0;             // triggers ngOnChanges, not reactive
  @Input() currency = 'USD';
  formatted = '';

  ngOnChanges() {
    this.formatted = `${this.currency} ${this.price.toFixed(2)}`;
  }
}

GOOD — signal input with computed (Angular 17.1+, stable 19)