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:

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

Vamos considerar a sintaxe da estrutura:

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

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

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

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];
}