TP4 : Communication entre

composants
État d’avancement du projet
Jusqu’ici, vous avez imbriqué deux composants au composant home : le composant home-banner
(qui affiche la barre de navigation) et home-products (composant responsable de l’affichage de la
liste des produits : nom, image et prix, à partir du fichier mock catalogue-produits.ts) :

La boite à outils Bootstrap a été utilisée pour mettre en forme la barre de navigation (navbar) et
pour organiser les produits (card-deck, card, ...).
La façon la plus « propre » et la plus élégante pour utiliser Bootstrap est d’ajouter ng-Bootstrap
(Angular Powered Bootstrap) :

ng add @ng-bootstrap/ng-bootstrap
Ceci vous donne accès aux :
• Composants Bootstrap utilisant uniquement du CSS ;
• Composants ng-Bootstrap utilisant du CSS et du code JS qui remplacent les composants de
Bootstrap faisant appel à JQuery.
Pour plus d’informations concernant les styles de votre application, consultez le fichier
Guide_Styles.pdf fourni avec ce TP).

1
Imbrication des composants
Comme nous avons déjà vu dans le TP3, le sélecteur CSS d’un composant permet de faire appel à
ce composant depuis le template HTML d’un autre composant : on dit alors que le premier
composant est le fils du second.
Dans le TP3, nous avons déjà créé des relations père-fils entre le composant home d’un coté et les
composants home-banner et home-products de l’autre. Voici le template du composant
home (home.component.html) :
<app-home-banner></app-home-banner>
<app-home-products> </app-home-products>
Grâce à ce mécanisme d’imbrication des composants, on peut créer une hiérarchie.

Faire appel au composant home-product-detail dans le template du composant home-

products (le premier devient alors fils du second).
La vue contrôlée par le composant home-product-detail doit alors s’imbriquer à la vue contrôlée par
le composant home-products :

Modifier le contenu du template HTML du composant home-product-detail (et éventuellement son

fichier de style privé) afin de préparer de la place au détails d’un produit.
Voici un exemple de rendu :

2
Tester la communication de composant père
vers composant fils
Le lien suivant explique la procédure utilisée pour établir une communication entre composant père
et composant fils : https://angular.io/guide/inputs-outputs
Dans ce TP, la communication se fait dans un seul sens (père vers fils) donc seul le mécanisme
@Input() est utilisé.
Commençons par un exemple simple dans lequel le père passe une chaîne de caractère (par exemple
« Salut, ce message provient du composant père de ce composant ») que le composant fils doit
afficher.
Dans la classe du composant home-product-detail, ajouter une propriété msg de type string précédée
par @Input() qui signifie que la valeur de cette propriété sera transmise au composant en tant
qu’une entrée provenant du père qui lui fait appel :

import { Component, OnInit, Input } from '@angular/core';

@Component({
...
})
export class HomeProductDetailComponent implements OnInit {

@Input() msg : string;

...

3
Préparez maintenant le message que doit passer le père (home-products) à son fils en ajoutant à la
classe HomeProductsComponent la propriété ch suivante :

ch="Salut, ce message provient du composant père de ce composant";

Il faut maintenant que le composant père passe cette chaîne lors de l’appel de son fils en tant
qu’entrée pour la propriété msg du fils. Pour ce faire, utilisez le property binding dans le html du
père dans le tag qui utilise le sélecteur du composant fils :

<app-home-product-detail [msg]="ch"></app-home-product-detail>
Reste maintenant à afficher, dans le template du fils home-product-detail.html, le contenu de la
propriété msg en utilisant le mécanisme d’interpolation.
Dans cet exemple, je remplace le texte précédent « Description du produit » par le contenu de la
propriété msg :

Passage d’un produit du père vers le fils

Vous venez de passer une chaîne de caractère du composant père home-products vers son
composant fils home-product-detail.

Apportez maintenant les modifications nécessaires à votre code pour passer un objet de type
Produit, le composant fils affichera alors les valeurs des champs de ce produit (nom, image,
description, prix).
A titre d’exemple, vous pouvez passer l’un des produits qui sont dans le tableau de produits du
composant père:

4
Permettre à l’utilisateur de choisir le produit
dont il veut afficher le détail
Il faut que les informations affichées par le composant home-product-detail correspondent au
produit sélectionné par l’utilisateur (l’utilisateur sélectionne un produit du catalogue en appuyant
sur son image).

Ajoutez le code nécessaire pour gérer les click sur les images du catalogue pour sélectionner un
produit.
Mais reste un petit point à régler : initialement, on ne veut pas qu’un produit soit affiché par défaut.
En fait, initialement tout le composant home-product-detail ne doit pas apparaître.

Utilisez la directive *ngIf pour ce faire.