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:

app/app.component.tsexport class AppComponent {
  public arr: number[] = [1, 2, 3, 4, 5];
}

Consideriamo la sintassi del costrutto:

app/app.component.html@for () {
  tag
}

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

app/app.component.html@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:

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

app/app.component.tsexport class AppComponent {
  public arr: numbers[] = [1, 2, 3, 4, 5];
}