Pour afficher des listes de données, Angular 17 introduit la boucle @for qui remplace avantageusement *ngFor. Elle est plus performante et dispose d'une clause @empty native pour gérer les listes vides !
Gérez la liste ci-dessous. Le HTML s'occupe de générer les cartes de visite dynamiquement grâce à la boucle.
À l'intérieur de la boucle @for, Angular vous offre des variables gratuites préfixées par un $ pour vous aider à concevoir le design :
$indexLa position actuelle (0, 1, 2...)$countLe nombre total d'éléments$firstVrai si c'est le TOUT PREMIER$lastVrai si c'est le TOUT DERNIER$evenVrai si la ligne est Paire$oddVrai si la ligne est Impaireimport { Component } from '@angular/core';
@Component({
selector: 'app-users',
template: `
<!-- La boucle génère un div pour chaque utilisateur -->
@for (user of users; track user.id) {
<div>
N°{{ $index + 1 }} : {{ user.name }}
<span *ngIf="$first">(Le Boss)</span>
</div>
} @empty {
<!-- Ce bloc est génial : il s'affiche si la liste est vide ! -->
<p>Il n'y a personne ici.</p>
}
`
})
export class UserListComponent {
users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' }
];
}