Конструкција for у Angular-у

Петља кроз елементе низа се такође може покренути користећи конструкцију @for.

Испробајмо у пракси. Нека у нашем компоненту опет постоји низ:

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

Размотримо синтаксу конструкције:

app/app.component.html@for () {
  тагови
}

Наведемо низ који се претражује и променљиву у коју ће улазити елементи:

app/app.component.html@for (elem of arr) {
  тагови
}

Међутим, то још није све. За исправан рад Angular-а морамо навести посебну команду track. После ње морамо навести неку јединствену вредност за сваки елемент низа. Ово је потребно да би Angular могао оптималније да ради са DOM-ом. Узмимо као такву јединствену вредност број елемента низа. За то морамо навести променљиву $index. Дакле, ево нашег коначног кода:

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