Конструкция 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];
}

Изведете всеки елемент от този масив в отделен параграф.