*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>
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.
<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>

Prochains workshops : 10% de réduction avec le code GUIDEANGULAR
Pour plus d'actus Angular, JavaScript et Web, suivez-moi sur Twitter !
Dernière mise à jour