web-profile

Angular ngFor

Basic syntax

html:

<ul>
  <li *ngFor="let item of items">{{item?.id}}</li>
</ul>

Syntax with local variables:

html:

<li *ngFor="let user of users; index as i; count as total; first as isFirst; last as isLast; even as isEven; odd as isOdd">
  {{i}} / {{users.length}}. {{user}} 
  total: {{total}}
  <span *ngIf="isFirst">First</span>
  <span *ngIf="isLast">Last</span>
  <span *ngIf="isEven">Even</span>
  <span *ngIf="isOdd">Odd</span>
</li>

Syntax without markup:

html:

<ng-container *ngFor="let i of [1,2,3]”>
  <input type="text" [value]="i" />
</ng-container>

Leave a Reply

Your email address will not be published.