Konštrukcia for v Angular

Cyklus cez prvky poľa je možné spustiť aj pomocou konštrukcie @for.

Vyskúšajme to v praxi. Nech je opäť v našom komponente pole:

export class AppComponent {
	public arr: number[] = [1, 2, 3, 4, 5];
}

Pozrime sa na syntax konštrukcie:

@for () {
	tagy
}

Uveďme prechádzané pole a premennú, do ktorej budú padať prvky:

@for (elem of arr) {
	tagy
}

To však ešte nie je všetko. Pre korektnú funkčnosť Angular musíme uviesť špeciálny príkaz track. Za ním musíme uviesť nejakú jedinečnú hodnotu pre každý prvok poľa. To je potrebné, aby mohol Angular optimálnejšie pracovať s DOM. Zoberme si ako takú jedinečnú hodnotu číslo prvku pola. Na to musíme uviesť premennú $index. Takže, tu je náš konečný kód:

@for (elem of arr; track $index) {
	<div>
		{{ elem }}
	</div>
}

Dané pole:

export class AppComponent {
	public arr: numbers[] = [1, 2, 3, 4, 5];
}

Vypíšte každý prvok tohto poľa v samostatnom odseku.