TrackBy

Az ngFor-nál, minden egyes elemet ellátsz egy ID-vel, egy nagyobb lista esetén az Angular be tudja azonosítani azokat az elemeket, amelyeket cserélnie kell, vagy nem kell cserélnie. Így nem kell a teljes listát lecserélni. Performancia jelentősége van.

A trackBy egy funkció az Angularban, amelyet az *ngFor direktívában használhatunk arra, hogy segítsünk az Angularnak azonosítani, mely elemek változtak, lettek hozzáadva vagy eltávolítva egy listában, amikor a lista elemek adatai megváltoznak. A trackBy használata lehetővé teszi, hogy az Angular hatékonyabban újrarajzolja a listát a DOM-ban, mivel csak azokat az elemeket frissíti, amelyek ténylegesen megváltoztak, és nem az egész listát.

Ez különösen hasznos lehet nagy listák esetén, ahol a teljesítmény fontos szempont, vagy amikor a lista elemeihez kapcsolódó állapotot szeretnénk megőrizni (például ha egy elem kibővült-e vagy be van-e zárva).

Példa nélkül trackBy-nél:

<ul>
  <li *ngFor="let item of items">{{ item.name }}</li>
</ul>

Példa trackBy használatával:

<ul>
  <li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>
</ul>

@Component({
  // ...
})
export class MyComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    // ...
  ];

  trackById(index: number, item: any): number {
    return item.id;
  }
}

Ebben a példában a trackById funkció az elem id attribútumát használja azonosítóként. Így, ha az items tömb adata megváltozik, az Angular csak azokat az elemeket frissíti a DOM-ban, amelyeknek az id-ja nincs a korábbi listában, vagy amelyek adata megváltozott.

A trackBy használatával nem csak a teljesítmény javítható, hanem bizonyos esetekben a felhasználói élmény is, mivel az állapotot megőrző viselkedések (például animációk vagy bővített tartalmak) is megmaradhatnak.