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 le control flow block@for.

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(): void {
    this.faceSnaps = [
      new FaceSnap(
        'Archibald',
        'Mon meilleur ami depuis toujours !',
        'https://cdn.pixabay.com/photo/2015/05/31/16/03/teddy-bear-792273_1280.jpg',
        new Date(),
        10
      ),
      new FaceSnap(
        'Three Rock Mountain',
        'Un endroit magnifique pour les randonnées.',
        'https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Three_Rock_Mountain_Southern_Tor.jpg/2880px-Three_Rock_Mountain_Southern_Tor.jpg',
        new Date(),
        6
      ),
      new FaceSnap(
        'Un bon repas',
        'Mmmh que c\'est bon !',
        'https://wtop.com/wp-content/uploads/2020/06/HEALTHYFRESH.jpg',
        new Date(),
        156
      )
    ];
    this.faceSnaps[1].setLocation('à la montagne');
  }
}

Maintenant, dans le template, au lieu d'insérer plusieurs instances de  <app-face-snap> , vous allez utiliser le code suivant :

@for (faceSnap of faceSnaps; track faceSnap.title) {
  <app-face-snap [faceSnap]="faceSnap"></app-face-snap>
}

Regardons de plus près ce qui se passe exactement avec cette syntaxe :

• le control flow block  @for  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

• le paramètre  track  permet à Angular d'identifier les différents éléments du tableau grâce à une propriété unique — puisque notre modèle FaceSnap n'a pas encore de propriété  id  , on utilisera le  title  comme propriété unique (pour notre exemple simple où l'on sait que c'est le cas !)

Pour éclaircir un peu les choses, voici un exemple avec un alias plus parlant :

@for (faceSnapElement of faceSnaps; track faceSnapElement.title) {
  <app-face-snap [faceSnap]="faceSnapElement"></app-face-snap>
}

Syntaxe bonus !

Puisque nos éléments HTML de component ne nécessitent pas de contenu entre leurs balises d'ouverture et de fermeture, vous pouvez utiliser la syntaxe "self-closing" pour rendre votre template plus propre et plus facile à lire :

@for (faceSnap of faceSnaps; track faceSnap.title) {
  <app-face-snap [faceSnap]="faceSnap" />
}

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é

• Le control flow block  @for  vous permet d'insérer un élément dans le DOM pour chaque élément dans un tableau.

• La syntaxeelement of array  vous donne accès à l'élément de chaque itération, vous permettant de l'injecter dans un component, par exemple.

• Le paramètre  track  demande une propriété qui sera unique pour chaque élément du tableau (qui sera souvent mais pas toujours son  id  , s'il en a un)

Dans le chapitre suivant, nous ajouterons du style dynamique grâce à une nouvelle directive !