Direktiva for v Angular

Mějme pole:

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

Pojďme toto pole projít cyklem v souboru templatu. K tomu je určena directiva *ngFor. Umí projít pole a vypsat každý jeho prvek v samostatném tagu.

Nejprve je třeba tuto direktivu importovat:

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

A přidat ji do sekce imports v dekorátoru:

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

Nyní ji lze používat. Podívejme se, jak se to dělá. Mějme seznam ul:

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

Udělejme to, aby naše pole bylo procházeno cyklem a každý jeho prvek byl vypsán v tagů li. To se dělá následujícím způsobem:

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