Direktiva for në Angular

Le të kemi një array:

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

Le ta përsërisim këtë array me një cikël në fajllin e template-it. Për këtë qëllim shërben direktiva *ngFor. Ajo mund të përsërisë një array dhe të shfaqë çdo element të tij në një tag të veçantë.

Fillimisht kjo direktivë duhet të importohet:

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

Dhe t'i shtohet seksionit të importeve në dekorator:

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

Tani mund të përdoret. Le të shohim se si bëhet kjo. Le të kemi një listë ul:

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

Le të bëjmë që array-ja jonë të përsëritet në cikël dhe çdo element i saj të shfaqet në tag-et li. Kjo bëhet në mënyrën e mëposhtme:

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