trackBy / track

Sans tracking, Angular détruit et recrée chaque élément DOM d’une liste à chaque changement de données. track (et l’ancien trackBy) indique à Angular comment identifier chaque élément afin qu’il ne touche que ce qui a réellement changé.

Nouveau Control Flow (@for — Angular 17+)

track est obligatoire dans @for — Angular impose la bonne pratique à la compilation :

@for (album of albums; track album.id) {
  <app-album-card [album]="album" />
}

• track album.id — utilisez une propriété stable et unique
• track $index — valide mais moins efficace (le DOM est recyclé par position, pas par identité)

*ngFor classique avec trackBy

Pour Angular 16 et antérieurs, ou si vous utilisez encore *ngFor :

@Component({
  template: `
    <div *ngFor="let album of albums; trackBy: trackById">
      {{ album.title }}
    </div>
  `
})
export class AlbumListComponent {
  trackById(index: number, album: Album): number {
    return album.id;
  }
}

La fonction trackBy reçoit (index, item) et doit retourner une valeur unique stable — généralement l’ID de l’élément.

Pourquoi c’est important

Scénario	Sans track	Avec track
L’API renvoie la même liste	Tous les nœuds DOM détruits et recréés	Aucun changement
Un élément ajouté à la fin	Tous les nœuds recréés	Un nœud inséré
Un élément modifié au milieu	Tous les nœuds recréés	Seul ce nœud mis à jour
Éléments réordonnés	Tous les nœuds recréés	Nœuds déplacés en place

Le gain de performance est significatif pour les listes longues ou fréquemment mises à jour.

Quoi tracker

<!-- ✅ ID unique stable -->
@for (item of items; track item.id) { ... }

<!-- ✅ Clé composite si pas de champ unique -->
@for (item of items; track item.type + '-' + item.id) { ... }

<!-- ⚠️ Index seulement — valable pour les listes statiques, mauvais pour les dynamiques -->
@for (item of items; track $index) { ... }

<!-- ❌ Tracker une valeur instable annule le bénéfice -->
@for (item of items; track item) { ... }

Point clé

Dans Angular moderne, @for avec track remplace *ngFor + trackBy. L’expression track explicite est plus courte, en ligne, et obligatoire — vous ne pouvez pas l’oublier.