angular/for-track-id

Why

track item compares items by object identity. Every time the list is replaced (a new HTTP response, an immutable update, a signal set), every object is new, so Angular destroys and recreates every row: focus and typed text in the rows are lost and the update is much slower than it needs to be.

Fix

Track a field that is unique and stable for the item, such as track item.id or track item.slug. track $index is acceptable only for a static list that never reorders and holds no state. A list of strings or numbers may track the value itself (track tag); the check leaves those alone.

Examples

<!-- bad -->
@for (user of users(); track user) { <app-user-row [user]="user" /> }
<!-- good -->
@for (user of users(); track user.id) { <app-user-row [user]="user" /> }

Sources

• Angular, Control flow (why track in @for blocks is important)

Read it in the terminal

npx github:dawidolko/frontend-skills explain angular/for-track-id