[[oktatas:web:angular|< Angular]]

====== Angular - TrackByFunction ======

  * **Szerző:** Sallai András
  * Copyright (c) 2023, Sallai András
  * Szerkesztve: 2023, 2025
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== NgForOf azonosítója =====

Az NgForOf direktava helyett a @for() szintaxis ajánlott az Angular 16 utáni változatokban, de használható ez a direktíva is.


A TrackByFunction, az NgForOf direktíva használatakor segít az egyedi azonosító használatában a DOM változtatása során.

Célja, hogy csak a DOM-nak csak azokat a részeit változtassuk, ami az adott tömbben vagy listában is változik.

Ez Angular új **@for()** szintaxis használata esetén nem szükséges ez a függvény, mivel a kötelező track kulccsal ez automatikus.


===== Model és tömb =====

<code javascript>
class Employee {
    id !: number;
    name !: string;
    city !: string;
    salary !: number;
}
</code>

Legyen egy list:

<code javascript>
employees: Employee[] = [];
</code>


===== NgForOf direktíva =====


==== TrackBy függvény ====

<code javascript>
function employeeTrackBy(index, employee) {
    return employee.id;
}
</code>


==== Használat ====

<code html>
<tr *ngFor="let emp of employees; trackBy:employeeTrackBy">
    <td>{{ emp.name }}</td>
    <td>{{ emp.city }}</td>
    <td>{{ emp.salary }}</td>
</tr>
</code>

===== Az Angular @for() szintaxisa =====

A @for() szintaxis használata esetén nem szükséges külön megírni a trackBy() függvényt, mivel
automatikusan működik.

<code html>
@for(emp of employees; track emp.id) {
    <tr>
      <td>{{ emp.name }}</td>
      <td>{{ emp.city }}</td>
      <td>{{ emp.salary }}</td>    
    </tr>
}
</code>