Direttiva for in Angular

Supponiamo di avere un array:

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}

Iteriamo su questo array con un ciclo nel file del template. A questo scopo è pensata la directiva *ngFor. Essa può iterare su un array e visualizzare ogni suo elemento in un tag separato.

Per prima cosa questa direttiva deve essere importata:

app/app.component.tsimport {NgFor} from "@angular/common";

E aggiungerla alla sezione degli import nel decoratore:

app/app.component.ts@Component({
  .....
  imports: [....., NgFor],
  ....
})

Ora possiamo usarla. Vediamo come si fa. Supponiamo di avere una lista ul:

app/app.component.html<ul>
  
</ul>

Facciamo in modo che il nostro array venga iterato e che ogni suo elemento venga visualizzato nei tag li. Questo si fa nel modo seguente:

app/app.component.html<ul>
  <li *ngFor="let el of arr">
    {{ el }}
  </li>
</ul>

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