TrackBy for Lists

Purpose

Use this skill to keep Angular list rendering stable by giving Angular a reliable identity for each item. The goal is to avoid unnecessary DOM destruction and recreation when arrays are refreshed, sorted, filtered, or replaced. If the issue is broader list rendering cost, defer to list-rendering-optimization; this skill owns identity tracking specifically.

When to Use

Use this skill when:

• A template renders a list with *ngFor or @for.
• List items come from an API, observable, signal, search result, or state update.
• A list can be reordered, filtered, paginated, or refreshed.
• Inputs, focus, animations, or expanded rows are reset unexpectedly.
• The task mentions slow lists or unnecessary DOM updates.
• The list contains child components, form controls, or locally managed UI state.

Do