*ngFor

La directive structurelle ngFor permet de boucler sur un array et d'injecter les éléments dans le DOM.

<ul>
<li *ngFor="let book of bookList">{{ book.name }}</li>
</ul>
src/app.component.ts
src/app.component.ts
export class AppComponent {
bookList = [
{
name: 'eXtreme Programming Explained'
},
{
name: 'Clean Code'
}
];
}

Il est possible de récupérer d'autre informations telles que l'index de l'élément :

  • index : position de l'élément.

  • odd : indique si l'élément est à une position impaire.

  • even : indique si l'élément est à une position paire.

  • first : indique si l'élément est à la première position.

  • last : indique si l'élément est à la dernière position.

src/app.component.html
src/app.component.html
<ul>
<li *ngFor="let book of bookList; let index = index; let isFirst = first; let isOdd = odd;">
<span>{{ index }}</span>
<span>:</span>
<span>{{ book.name }}</span>
<span>( isFirst: {{ isFirst }}, isOdd: {{ isOdd }} )</span>
</li>
</ul>
Exemple ngFor

Prochains workshops : 10% de réduction avec le code GUIDEANGULAR

Pour plus d'actus Angular, JavaScript et Web, suivez-moi sur Twitter !

​