mediumFrontend

What is trackBy in ngFor and why use it?

Q: What is trackBy in ngFor and why use it?

**Core concept.** trackBy gives *ngFor a function that returns a **stable identity** (usually an id) for each item, so Angular can tell which items are the same across renders. Without it, replacing the array makes Angular **destroy and rebuild every row**; with it, it reuses the existing DOM and only touches what changed. no trackBy new array → rebuild all rows trackBy: id reuse DOM, patch changes **How it works

564 views

Understand the problem

Explain trackBy.

ngfortrackby

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

trackBy by id

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <ul>
      <li *ngFor="let u of users; trackBy: trackById">{{ u.name }}</li>
    </ul>
  `,
})
export class AppComponent {
  users = [{ id: 1, name: 'Ada' }, { id: 2, name: 'Grace' }];
  // identify rows by id → Angular reuses DOM on data refresh
  trackById(index: number, u: { id: number }) { return u.id; }
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the difference between reactive and template-driven forms?

What is the purpose of updateOn in Reactive Forms?