Costrutto for in Angular

È possibile iterare attraverso gli elementi di un array anche utilizzando il costrutto @for.

Proviamolo nella pratica. Supponiamo che nel nostro componente ci sia ancora un array:

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

Consideriamo la sintassi del costrutto:

@for () {
	tag
}

Specifichiamo l'array da iterare e la variabile in cui verranno inseriti gli elementi:

@for (elem of arr) {
	tag
}

Tuttavia, non è ancora tutto. Per un corretto funzionamento di Angular, dobbiamo specificare un comando speciale track. Dopo di esso, dobbiamo specificare un valore univoco per ciascun elemento dell'array. Questo è necessario affinché Angular possa lavorare con il DOM in modo più ottimale. Prendiamo come valore univoco l'indice dell'elemento dell'array. Per fare questo, dobbiamo specificare la variabile $index. Quindi, ecco il nostro codice finale:

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

Dato l'array:

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

Visualizza ogni elemento di questo array in un paragrafo separato.