Angular - 3.9 Préparer l'affichage des recettes dans la liste

Cette leçon prépare l'affichage des recettes dans le composant liste. On ajoute une ligne avec un bouton, puis un élément de recette rempli avec des données factices. Le défi consiste à remplacer ces données par celles du tableau de recettes, pour afficher de vraies recettes.

Ajouter le bouton d'ajout

Une ligne Bootstrap, avec une colonne qui occupe toute la largeur, accueille un bouton. La logique d'ajout d'une recette sera écrite plus tard. Pour l'instant, le bouton sert uniquement à obtenir un rendu clair.

<div class="row">
  <div class="col-xs-12">
    <button class="btn btn-success">Ajouter une recette</button>
  </div>
</div>

Construire l'élément de recette

L'élément est une ancre cliquable, car la recette sera sélectionnée plus tard. Il reçoit les classes list-group-item et clearfix pour l'apparence d'une liste. À gauche, un titre h4 affiche le nom et un paragraphe affiche la description. À droite, une image s'adapte à la taille de l'écran, avec une largeur maximale de 50 pixels.

<a class="list-group-item clearfix">
  <div class="pull-left">
    <h4 class="list-group-item-heading">Fraisier</h4>
    <p class="list-group-item-text">Un gâteau à la fraise et à la vanille</p>
  </div>
  <span class="pull-right">
    <img src="<url-de-l-image>" class="img-responsive" style="max-width: 50px;">
  </span>
</a>

Le défi : rendre l'élément dynamique

Utilisez l'élément ci-dessus pour reproduire la même structure, mais avec des données issues du tableau de recettes. Les trois emplacements à remplir sont le nom, la description et l'image. Lorsque de nouvelles recettes seront ajoutées au tableau, elles devront s'afficher automatiquement. La correction est présentée dans la leçon suivante.

En résumé

Le composant liste comporte un bouton d'ajout et un élément de recette. Cet élément est pour l'instant rempli avec des données factices. L'exercice consiste à le remplir avec les données du tableau de recettes.

Points clés

• Une ligne Bootstrap et une colonne col-xs-12 occupent toute la largeur.
• L'élément de recette est une ancre cliquable, car il sera sélectionné plus tard.
• Les classes Bootstrap donnent l'apparence d'une liste.
• L'image est limitée à 50 pixels de large.
• L'exercice consiste à remplacer les données factices par des données dynamiques.

Questions fréquentes

Pourquoi les données sont-elles en dur pour l'instant ?

Le composant ne peut pas encore accéder aux données des recettes. Cette possibilité est étudiée dans la section suivante.

Pourquoi le bouton n'ajoute-t-il rien ?

La logique d'ajout sera écrite plus tard. Le bouton sert ici seulement à obtenir un rendu clair.

Où sera placé le code de l'élément de recette ?

Il sera placé dans le composant élément recette, une fois que les données pourront y être transmises.