trackByIndex

A trackByIndex metódus egy optimalizációs segédfüggvény az Angular @for/*ngFor direktívához, amely azt mondja meg Angularnak, hogyan azonosítsa az elemeket egy tömbön belüli ismétlődő megjelenítéskor.

---

🔧 Az általad használt változat:

public trackByIndex(index: number, _file: File): number {
  return index;
}

Ez azt jelenti: használja az index-et (sorszámot) az elem egyedi azonosítására.

---

🧠 Miért fontos ez?

Amikor Angular újrarendereli a DOM-ot (pl. új fájlok feltöltésekor vagy törléskor), akkor:

• Ha nem adsz meg trackBy függvényt, akkor Angular minden elemet újra létrehoz a DOM-ban, még azokat is, amik nem változtak.
• Ha használod a trackBy-t, Angular csak azokat az elemeket cseréli ki, amik valóban megváltoztak, így:
  • gyorsabb a DOM frissítés,
  • kevesebb új objektum jön létre,
  • csökkenhet a memóriahasználat,
  • megmaradnak a meglévő DOM állapotok (pl. fókusz, scroll).

---

📦 Példa sablonban:

@for (file of uploadedFiles; track trackByIndex($index, file)) {
  <li>{{ file.name }}</li>
}

Itt az uploadedFiles tömb elemeit rendereli, és a trackByIndex segíti az Angularnak felismerni, hogy melyik elem melyik.

---

⚠️ Mikor nem ideális az index használata?

Ha a tömb tartalma gyakran változik (pl. elemek beszúrása/törlése), akkor az index alapú azonosítás pontatlanná válhat. Ilyenkor jobb az egyedi azonosító (id, name, stb.) alapján track-elni:

public trackByFileName(_index: number, file: File): string {
  return file.name;
}

És:

@for (file of uploadedFiles; track trackByFileName($index, file)) { ... }

Ez stabilabb, ha a file.name egyedi.

---

✅ Összefoglalás

Kérdés	Válasz
Mit csinál trackByIndex?	Segít Angularnak azonosítani a tömb elemeit index alapján
Mire jó?	Gyorsabb, hatékonyabb DOM frissítés
Mikor használd?	Ha van ismétlődő megjelenítés (@for vagy *ngFor)
Mikor használj mást, pl. file.name?	Ha az index nem stabil (pl. lista dinamikusan változik)

Ha szeretnéd, átírhatom az index alapút fájlnévre (file.name)-alapúra.