16. Directives structurelles intégrées : *NgFor
*NgFor est utilisé pour itérer sur une collection (comme un tableau) et rendre un template une fois pour chaque élément de cette collection.
Itération simple
Classe du composant :
typescript interface Product { id: number; name: string; price: number; }
export class ProductListComponent { products: Product[] = [ { id: 1, name: 'Ordinateur portable', price: 1200 }, { id: 2, name: 'Souris', price: 25 }, { id: 3, name: 'Clavier', price: 75 } ]; }
Template :
html
- ID : {{ product.id }} | Nom : {{ product.name }} | Prix : {{ product.price }}€
Variables locales exportées
*NgFor expose plusieurs variables locales qui fournissent des informations sur l'état de l'itération :
| Variable | Valeur |
|---|---|
index | L'index actuel de l'élément (basé sur 0) |
first | Booléen, vrai si l'élément est le premier du tableau |
last | Booléen, vrai si l'élément est le dernier du tableau |
even | Booléen, vrai si l'index est pair |
odd | Booléen, vrai si l'index est impair |
Exemple utilisant l'index et la liaison de classe :
html
- ({{ i + 1 }}) {{ item.name }}
La fonction trackBy (Performance)
Lorsque la source de données change (ex: un élément est ajouté, supprimé ou réordonné), Angular reconstruit par défaut tout l'arbre DOM de la liste. C'est inefficace.
trackBy indique à Angular comment identifier de manière unique chaque élément. Si l'identité (ex: l'ID du produit) n'a pas changé, Angular réutilise l'élément DOM existant.
typescript trackProductById(index: number, product: Product): number { return product.id; }
html