Debugging Angular Signals: A Quick Trick

Mon, 02 Feb 2026 00:00:00 +0000

Signals don’t show up in the regular change detection logs. When something’s not updating and you can’t figure out why, drop an effect() in your component:

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

export class CartComponent {
 items = signal<CartItem[]>([]);
 total = computed(() => this.items().reduce((sum, i) => sum + i.price, 0));

 constructor() {
 effect(() => {
 console.log('items changed:', this.items());
 console.log('total is now:', this.total());
 });
 }
}

The effect() runs whenever any signal it reads changes. It automatically tracks dependencies — no need to specify what to watch.

Debugging on Dan's Blog

Debugging Angular Signals: A Quick Trick