Estructura for en Angular

El bucle por los elementos de un array también se puede ejecutar usando la estructura @for.

Probemos en la práctica. Supongamos que nuevamente en nuestro componente hay un array:

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

Consideremos la sintaxis de la estructura:

@for () {
	etiquetas
}

Especificaremos el array a iterar y la variable en la que caerán los elementos:

@for (elem of arr) {
	etiquetas
}

Sin embargo, esto no es todo. Para el correcto funcionamiento de Angular, debemos indicar un comando especial track. Después de él, debemos especificar un valor único para cada elemento del array. Esto es necesario para que Angular pueda trabajar con el DOM de manera más óptima. Tomemos el número del elemento del array como dicho valor único. Para ello, debemos indicar la variable $index. Entonces, aquí está nuestro código final:

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

Se da un array:

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

Muestre cada elemento de este array en un párrafo separado.