Afficher un tableau

Comment faites-vous si une de vos propriétés est un tableau ? En effet, comment afficher cette propriété dans votre template ? Et bien en utilisant une directive dédiée: ngFor.

Imaginons que nous souhaitons afficher une propriété d’un composant qui contient une liste de Pokémons, et que cette propriété se nomme pokemons. Nous devons utiliser la directive ngFor dans notre template.

L’utilisation de cette directive est intuitive, vous l’appliquez sur l’élément HTML que vous souhaitez afficher pour chaque élément de votre liste. Ici nous souhaitons afficher une liste des Pokémons, nous devons donc appliquer la directive sur la balise li.

Ensuite, nous passons une expression à notre directive : let pokemon of pokemons.

Cette directive permet de définir une variable locale pokemon dans le code HTML qui est répété en boucle. Nous pouvons ensuite accéder à cette variable grâce à l’interpolation : {{ pokemon.name }}.

Le terme of permet de faire comprendre à Angular que cette variable locale sera extraite du tableau pokemons.

39. Améliorer le template de notre application

Laisser un commentaire