Angular › Angular DevTools & Debugging

How would you debug a component that is not updating even though its data changed?

Intermediate

Answer

Common causes include mutating an array or object directly instead of creating a new one when using the OnPush change detection strategy, since Angular only checks for a new reference in that mode. Checking the component's current inputs in Angular DevTools right after the update, and reviewing how the data was changed, usually reveals the mistake quickly.

// Wrong with OnPush, mutates the existing array directly, Angular does not notice the change
this.items.push(newItem);

// Correct, creates a brand new array so Angular detects the change
this.items = [...this.items, newItem];

Real-world example A to do list component using OnPush that would not visually update after adding a new item is fixed by replacing a direct array mutation with a fresh array created using the spread operator, letting Angular correctly detect the change.

Common follow-ups: Why does the OnPush strategy specifically require a new reference to detect a change?;What tool helps catch this kind of mutation mistake automatically?

Change Detection;State Management