Konstrukce for v Angular

Cykly přes prvky pole lze také spustit pomocí konstrukce @for.

Vyzkoušejme to v praxi. Předpokládejme, že v našem komponentu je opět pole:

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

Podívejme se na syntaxi konstrukce:

@for () {
	tagy
}

Uveďme procházené pole a proměnnou, do které budou prvky přicházet:

@for (elem of arr) {
	tagy
}

To však ještě není vše. Pro správnou funkci Angular musíme uvést speciální příkaz track. Za ním musíme uvést nějakou jedinečnou hodnotu pro každý prvek pole. To je potřeba, aby mohl Angular optimálně pracovat s DOM. Jako takovou jedinečnou hodnotu vezměme číslo prvku pole. K tomu musíme uvést proměnnou $index. Takže, zde je náš konečný kód:

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

Je dáno pole:

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

Vypište každý prvek tohoto pole v samostatném odstavci.