Angular - 3.6 Utilisation des composants

Maintenant que tous les composants sont créés, on commence à les utiliser dans le template de AppComponent. À la place du « Bonjour tout le monde » de test, j'ajoute <app-recipes> et juste en dessous <app-shopping-list>. Au rechargement, la CLI a généré dans chaque template un <p> par défaut : on voit donc deux paragraphes confirmant que les composants sont bien insérés.

La grille Bootstrap pour les recettes

Dans recipes.component.html, je veux la liste à gauche et le détail à droite. J'utilise les classes Bootstrap pour structurer ça :

une <div class="row"> pour la rangée ;
une <div class="col-md-5"> à gauche, qui contient <app-recipe-list> ;
une <div class="col-md-7"> à droite, qui contient <app-recipe-detail>.

Les classes col-md-* de Bootstrap placent les deux composants côte à côte sur écran large, et les empilent automatiquement en dessous quand la page rétrécit (par exemple quand l'inspecteur Chrome est ouvert). À l'intérieur de recipe-list.component.html, j'inclus <app-recipe-item> en attendant de générer dynamiquement la liste : le composant recipe-list assemblera plus tard une vraie liste à partir des éléments recipe-item.

Même logique pour la liste de courses : dans shopping-list.component.html, j'ajoute une row, une colonne col-xs assez large, j'y mets d'abord <app-shopping-edit> (la zone d'édition en haut pour ajouter ou modifier des ingrédients), puis une <hr> et plus bas l'affichage de la liste. L'agencement est satisfaisant ; reste un point : l'en-tête (app-header) gâche la mise en page actuelle. Nous le retravaillerons dans la prochaine vidéo.

En résumé

Cette leçon montre comment utiliser les composants créés précédemment dans Angular en les intégrant dans le composant principal « app ». L'instructeur explique comment ajouter les balises des composants directement dans le HTML et utiliser Bootstrap pour créer une mise en page avec colonnes (row, col-md-5, col-md-7) afin de positionner les composants côte à côte. On découvre également comment imbriquer des composants : par exemple, inclure le composant « élément recettes » dans le composant « liste de recettes ».

Points clés

Pour afficher un composant dans Angular, il suffit d'ajouter sa balise dans le fichier HTML du composant parent (ex: <app-recettes></app-recettes>)
Bootstrap et ses classes de grille (row, col-md-5, col-md-7) permettent de disposer les composants côte à côte en colonnes réactives
Les composants peuvent être imbriqués : un composant parent (liste de recettes) peut contenir des composants enfants (élément recettes) pour construire des structures hiérarchiques
La mise en page doit organiser les données visuellement : colonne étroite à gauche pour la liste, colonne plus large à droite pour les détails
Les classes de dimensionnement Bootstrap s'adaptent automatiquement à la taille de l'écran, ce qui explique pourquoi les colonnes peuvent se mettre sous les unes des autres sur petits écrans

Questions fréquentes

Comment affiche-t-on un composant dans le fichier HTML d'un autre composant ?

On utilise simplement la balise du composant. Par exemple, pour afficher le composant « élément recette », on tape la balise <app-element-recette></app-element-recette> dans le HTML du composant parent (liste de recettes).

Pourquoi les composants s'affichent-ils l'un en dessous de l'autre au lieu de côte à côte ?

Cela arrive quand la fenêtre du navigateur est trop petite ou quand l'inspecteur d'éléments est ouvert. Les classes Bootstrap s'adaptent automatiquement à la taille de l'écran. Il suffit d'augmenter la taille de la fenêtre ou de fermer l'inspecteur pour les voir côte à côte.

Comment devrait-on organiser les composants pour afficher une liste et ses détails ?

On utilise une structure avec deux colonnes : une colonne plus petite à gauche avec col-md-5 pour la liste (recettes ou courses), et une colonne plus large à droite avec col-md-7 pour les détails ou l'édition. Les composants correspondants sont imbriqués dans chaque conteneur.