Конструкција for у Angular-у

Петља кроз елементе низа се такође може покренути користећи конструкцију @for.

Испробајмо у пракси. Нека у нашем компоненту опет постоји низ:

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

Размотримо синтаксу конструкције:

@for () {
	тагови
}

Наведемо низ који се претражује и променљиву у коју ће улазити елементи:

@for (elem of arr) {
	тагови
}

Међутим, то још није све. За исправан рад Angular-а морамо навести посебну команду track. После ње морамо навести неку јединствену вредност за сваки елемент низа. Ово је потребно да би Angular могао оптималније да ради са DOM-ом. Узмимо као такву јединствену вредност број елемента низа. За то морамо навести променљиву $index. Дакле, ево нашег коначног кода:

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

Дат је низ:

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

Прикажите сваки елемент овог низа у засебном параграфу.