Angular’s NG0956 means an @for loop’s tracking expression made Angular recreate the DOM for every item. If an immutable update replaces each object with a new instance, tracking the object itself can make Angular treat every row as new. Track changing items by a stable, unique property such as todo.id.
What NG0956 means
The track expression tells Angular how to associate collection items with the views rendered in the DOM. As Angular’s @for API documentation explains, that key lets Angular match items across updates and perform the necessary DOM operations when items are added, removed, or moved.
As an Amazon Associate I earn from qualifying purchases.
For that association to work, the key must represent the logical identity of an item, not merely the current JavaScript object instance. If a refresh creates new objects for records that already exist, tracking by object reference can make Angular conclude that every item is different. Angular’s NG0956 documentation describes this as an expensive operation that may also discard DOM-held state.
How object tracking triggers the error
Suppose a todo list is rendered with track todo, and an update creates a fresh object for each existing todo:
#1 Best Overall
this.todos = this.todos.map(todo => ({ ...todo, done: true }));Although each new object represents the same todo, its object reference differs from the old one. With track todo, Angular may treat every row as a new item and rebuild the rendered list, even though only a property binding needed to change.
Fix it with a stable, unique key
Use a property that is unique within the collection and remains unchanged for the lifetime of the logical item. For example, if each todo has a stable, unique id, write:
@for (todo of todos; track todo.id) {
<li>{{ todo.task }}</li>
}When the objects are reconstructed, their IDs still identify the same todos, so Angular can preserve the association with the existing views and update bindings instead of rebuilding every row.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsChoose a tracking key that matches the data
- Use a stable property, commonly an ID, when the collection can change through refreshes, additions, removals, or reordering. The key should be unique among the items and preserved when the same logical records are represented by new objects.
- Use
$indexonly for a static collection. Angular describes index tracking as appropriate when the collection’s membership and positions stay fixed. If rows can be inserted, deleted, or reordered, an index can identify a different item after the change; prefer a stable item property instead. - Avoid object-reference tracking for reconstructed data. It can be appropriate only when the same object references continue to represent the items across updates. For immutable updates that create replacement objects, a stable property is the safer identity key.
Why DOM recreation matters
Rebuilding every row can do unnecessary work. It can also reset state held by the DOM: Angular specifically notes that focus, text selection, and content loaded in an iframe can be lost when elements are recreated. The Angular error documentation describes the cost qualitatively; it does not quantify a speed impact, so the effect depends on the application and there is no supported benchmark figure to apply generally.
Rank #3
If the component still uses *ngFor
The older NgFor directive uses a trackBy function for the corresponding task of associating new object instances with the same logical items. Angular’s NgFor API documentation marks the directive deprecated since Angular v20.0 and recommends using @for. Check your project’s Angular version and migration needs before changing legacy code.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
