Cette page passera en revue angulaire 2 NgPar exemple. NgFor est une directive qui itère sur la collecte de données. Il est utilisé pour personnaliser l'affichage des données. Chaque fois qu'il y a un changement dans la collecte de données au moment de l'exécution, cela sera mis à jour dans l'affichage des données itéré par la directive NgFor. NgFor fournit des variables locales qui aideront à obtenir l'index de l'itération actuelle, à détecter si l'élément de l'itération est le premier ou le dernier et impair ou pair. NgFor est utilisé avec un élément HTML ainsi qu'un élément de composant. NgFor avec élément HTML itère le modèle qu'il contient. NgFor avec élément de composant itère le modèle HTML du composant enfant. NgFor peut être utilisé avec un astérisque (*) ou une directive de modèle ou une balise de modèle. Tout changement de contenu dans l'itération est propagé au DOM. NgFor avec élément HTML est utilisé comme suit.

NgFor

NgFor

user.ts

export class User {
  constructor(public name: string, public age: number) { 
  }
} 

user.component.ts

import {Component} from '@angular/core';
import {User} from './user';
@Component({
    selector: 'user-app',
    templateUrl: 'app/user.component.html' 

})
export class UserComponent {
    users = [
      new User('Mahesh', 20),
      new User('Krishna', 22),
      new User('Narendra', 30)
    ];
} 

user.component.html
<b> *ngFor Demo</b>
<ul>
 <li *ngFor="let user of users">
  {{user.name}} - {{user.age}}
 </li>
</ul>

<b> ngFor with template Attribute </b>
<ul>
<li template = "ngFor let user of users; let i = index">
  Row {{i}} : {{user.name}} - {{user.age}}
</li>
</ul>

<b> ngFor with template Tag </b>
<ul>
 <template ngFor let-user [ngForOf] = "users"  let-i = "index">
   <li>  Row {{i}} : {{user.name}} - {{user.age}} </li>
 </template>
</ul>

<b>index variable demo </b>
 <p *ngFor="let user of users; let i = index">
  Row {{i}} : Name: {{user.name}}
 </p>

 <b>first and last variable demo </b>
 <div *ngFor="let user of users; let i = index; let f=first; let l=last;">
  Row {{i}} : Name: {{user.name}}, is first row: {{f}}, is last row: {{l}}
 </div>

 <b>even and odd variable demo </b>
 <div *ngFor="let user of users; let i = index; let e=even; let o=odd;">
  Row {{i}} : Name: {{user.name}}, is even row: {{e}}, is odd row: {{o}}
 </div>

<br/><b>ngFor with component element using *ngFor</b>
<emp-app> *ngFor="let user of users" [emp]="user"> </emp-app>

<br/><b>ngFor with component element using template directive </b>
<emp-app> template="ngFor let user of users" [emp]="user"> </emp-app>

<br/><b>ngFor with component element using template tag </b>
<template ngFor let-user [ngForOf]="users">
  <emp-app> [emp]="user"></emp-app>
</template>