Angular - 2.26-Produire des listes avec ngFor.

*ngFor est la directive structurelle qui permet de produire dynamiquement une liste d'éléments dans le template à partir d'un tableau (ou tout itérable) défini dans le composant TypeScript. C'est l'équivalent Angular d'une boucle for...of appliquée au DOM.

Sa syntaxe : *ngFor="let item of items". Angular crée alors un élément (et tout son sous-arbre) pour chaque élément du tableau items, en exposant la variable locale item dans la portée du template. On peut ensuite afficher la valeur courante avec une interpolation, ou la passer à un composant enfant via un property binding.

Exemple complet

• Côté TypeScript : servers = ['Production', 'Staging', 'Dev'];
• Côté template : <div *ngFor="let server of servers">{{ server }}</div>
• Résultat : trois <div> sont produits, affichant chacun le nom d'un serveur.

On peut aussi récupérer l'index de l'itération courante avec la syntaxe let i = index : *ngFor="let server of servers; let i = index". La variable i est ensuite utilisable dans le template, par exemple pour styliser différemment les éléments pairs et impairs, ou pour afficher un numéro. D'autres variables locales sont disponibles : first, last, even, odd.

Attention à l'astérisque : comme *ngIf, *ngFor est une directive structurelle qui réécrit la balise en interne sous forme de <ng-template>. Si vous oubliez l'astérisque, Angular ne génère pas la liste et lève une erreur. Pour les très longues listes, pensez aussi à utiliser trackBy (vu plus tard) pour optimiser les performances : Angular peut alors réutiliser les éléments existants au lieu de tout recréer à chaque changement.