Angular - 3.12 Construire le composant liste de courses
Après les recettes, on passe au composant qui gère la liste de courses. Cette leçon transforme la liste en éléments cliquables, mis en forme avec Bootstrap. Elle prépare aussi la propriété des ingrédients, qui sera alimentée dans les leçons suivantes.
Créer une liste cliquable
Dans le fichier HTML, le paragraphe est remplacé par une liste non ordonnée, avec la classe list-group de Bootstrap. Chaque élément de la liste est une balise d'ancrage, avec la classe list-group-item pour avoir l'apparence d'un élément de liste.
Supprimer le lien et afficher un curseur
L'attribut href qui pointait vers rien est supprimé. Il pourrait provoquer un comportement indésirable, car l'élément sera utilisé comme un bouton plus tard. Une propriété de style est ajoutée pour que le curseur devienne un pointeur au survol.
<a class="list-group-item" style="cursor: pointer;">Préparer la propriété ingrédients
Le composant reçoit une propriété ingrédients, qui est pour l'instant un tableau vide. Les ingrédients seront utilisés dans toute l'application. Un modèle dédié sera donc créé dans la leçon suivante.
ingredients = [];En résumé
La liste de courses devient une liste Bootstrap de balises d'ancrage cliquables. Le lien vers rien est supprimé, et le curseur devient un pointeur. Une propriété ingrédients vide est ajoutée, en attendant le modèle dédié aux ingrédients.
Points clés
- La liste de courses utilise la classe list-group de Bootstrap.
- Chaque élément est une balise d'ancrage avec la classe list-group-item.
- L'attribut href est supprimé, car l'élément servira de bouton.
- Le style cursor pointer affiche une main au survol.
- La propriété ingrédients démarre comme un tableau vide.
Questions fréquentes
Pourquoi supprimer l'attribut href ?
Un lien vers rien pourrait provoquer un comportement indésirable. L'élément sera utilisé comme un bouton.
Pourquoi un tableau vide pour les ingrédients ?
La liste est prête à recevoir des ingrédients dans les leçons suivantes. Un tableau vide est la valeur de départ.
Pourquoi créer un modèle pour les ingrédients ?
Les ingrédients seront utilisés à plusieurs endroits de l'application, comme les recettes. Un modèle garantit qu'ils ont tous la même structure.