Affichez tous les FaceSnaps !
Dans une application web dynamique, il n'est généralement pas possible de prévoir en avance le nombre d'éléments qu'il y aura dans une liste de données retournée par le serveur. Il va souvent vous les renvoyer sous forme de tableau (ou Array, en anglais), et ce sera à vous d'arriver à afficher la liste en entier, qu'il y ait un élément ou mille ! Vous devrez donc itérer sur un tableau pour y arriver, et c'est là où intervient la directive*ngFor
.
Au lieu d'avoir trois variables de type FaceSnap
dans votre AppComponent, vous allez créer une seule variable qui contiendra un tableau de type FaceSnap[]
et modifier votre ngOnInit()
pour le remplir :
export class AppComponent implements OnInit {
faceSnaps!: FaceSnap[];
ngOnInit() {
this.faceSnaps = [
{
title: 'Archibald',
description: 'Mon meilleur ami depuis tout petit !',
imageUrl: 'https://cdn.pixabay.com/photo/2015/05/31/16/03/teddy-bear-792273_1280.jpg',
createdDate: new Date(),
snaps: 0,
location: 'Paris'
},
{
title: 'Three Rock Mountain',
description: 'Un endroit magnifique pour les randonnées.',
imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Three_Rock_Mountain_Southern_Tor.jpg/2880px-Three_Rock_Mountain_Southern_Tor.jpg',
createdDate: new Date(),
snaps: 6,
location: 'la montagne'
},
{
title: 'Un bon repas',
description: 'Mmmh que c\'est bon !',
imageUrl: 'https://wtop.com/wp-content/uploads/2020/06/HEALTHYFRESH.jpg',
createdDate: new Date(),
snaps: 0
}
];
}
}
Maintenant, dans le template, au lieu d'insérer plusieurs instances de <app-face-snap>
, vous allez utiliser le code suivant :
<app-face-snap *ngFor="let faceSnap of faceSnaps" [faceSnap]="faceSnap"></app-face-snap>
Regardons de plus près ce qui se passe exactement avec cette syntaxe :
la directive
*ngFor
fonctionne un peu comme une bouclefor...of
, c'est-à-dire que, dans ce cas de figure, elle va itérer sur le tableaufaceSnaps
et vous exposer l'élément correspondant à chaque itération sous l'aliasfaceSnap
vous associez ensuite l'élément du tableau à la propriété
faceSnap
du component.
Pour éclaircir un peu les choses, voici un exemple avec un alias plus parlant :
<app-face-snap *ngFor="let faceSnapElementInArray of faceSnaps" [faceSnap]="faceSnapElementInArray"></app-face-snap>
Et voilà ! Votre application peut maintenant gérer un tableau de FaceSnap de longueur indéfinie. N'hésitez pas à tester en rajoutant autant de FaceSnaps que vous voulez !
En résumé
La directive
*ngFor
vous permet d'insérer un élément dans le DOM pour chaque élément dans un tableau.La syntaxe
let element of array
vous donne accès à l'élément de chaque itération, vous permettant de l'injecter dans un component, par exemple.
Dans le chapitre suivant, nous ajouterons du style dynamique grâce à une nouvelle directive !