Débutez avec Angular

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 boucle  for...of  , c'est-à-dire que, dans ce cas de figure, elle va itérer sur le tableau  faceSnaps  et vous exposer l'élément correspondant à chaque itération sous l'alias  faceSnap

• 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 !