Sign in
Skip to solution
mediumFrontend

What is trackBy in ngFor and why use it?

564 views
01

Understand the problem

Explain trackBy.

ngfortrackby
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

trackBy gives Angular a stable identity function for list items so it reuses DOM nodes instead of recreating them when the array changes — preventing flicker, preserving element state, and improving performance on large or frequently updated lists.

Solution ready — 2 min read

Classified // press E to declassify

04

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; }
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 46 of 121 decoded in the Angular track. One more won't hurt.

Back to track