A estrutura for no Angular

O loop pelos elementos de um array também pode ser executado usando a estrutura @for.

Vamos experimentar na prática. Suponha que novamente em nosso componente exista um array:

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

Vamos considerar a sintaxe da estrutura:

@for () {
	tags
}

Vamos especificar o array a ser percorrido e a variável na qual os elementos serão armazenados:

@for (elem of arr) {
	tags
}

No entanto, isso ainda não é tudo. Para o funcionamento correto do Angular, devemos especificar o comando especial track. Após ele, devemos especificar um valor único para cada elemento do array. Isso é necessário para que o Angular possa trabalhar com o DOM de forma mais otimizada. Vamos usar como esse valor único o índice do elemento do array. Para isso, devemos especificar a variável $index. Então, aqui está nosso código final:

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

Dado o array:

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

Exiba cada elemento desse array em um parágrafo separado.