TP3 : Data Binding

et Directives structurelles
Intégration des composants de la page home
Chaque composant a besoin d’un sélecteur CSS (CSS selector). Le sélecteur indique à Angular
d’instancier le composant à chaque fois qu’il trouve un tag correspondant dans un template HTML.
Par exemple, si un composant hello.component.ts a pour sélecteur app-hello, Angular instancie ce
composant à chaque fois qu’il rencontre le tag <app-hello> dans un template HTML :
<app-hello></app-hello>

Effacer le contenu actuel du template du composant HomeComponent et remplacer le par une

instanciation des composants HomeBanner et HomeProducts.
Voici le résultat à obtenir :

Liste de produits
Normalement la liste de produits est récupérée à partir d’un serveur au backend. Mais vu
que vous êtes entrain de développer la partie client (frontend) de votre application sans se
soucier de la partie serveur, vous allez définir la liste de vos (exemples) de produits dans
un fichier local et prétendre que cette liste provient du serveur backend.

Sous le dossier shared, créez un dossier mock-data puis y créez un ficher typescript pour
stocker la liste des produits (shared/mock-data/catalogue-produits.ts).
Dans ce fichier, définissez une constante CATALOGUE de type tableau de Produit (Produit
est une classe métier que vous avez déjà défini dans le TP précédent). Commencez par
indiquer juste le nom et le prix de chaque produit, mais aussi la catégorie du produit
sinon vous aurez des erreurs de compilation (attribut categId obligatoire : voir TP2 !)
export const CATALOGUE : Produit [] = [
{nom: 'Prod1', prix :'150dt', categId : 'C1'},
...
];

1
Bien sûr, il faut importer la classe Produit pour pouvoir l’utiliser dans ce fichier :
import {Produit} from '../models/produit' ;

Dans le fichier home-products-component.ts ajoutez :

…
import {CATALOGUE} from '../../../shared/mock-data/catalogue-produits' ;

…
export class HomeProductsComponent implements OnInit {
title = "PRODUITS" ;
produits = CATALOGUE ;

}
...
On utilise le égal (=) devant produits et non les deux points (:) car CATALOGUE est une
constante et non un type.

Interpolation
Pour afficher la propriété title du composant dans la vue html correspondante, on utilise
l’interpolation dans son template home-products-component.html : {{title}}
On désire aussi afficher la liste des produits : le premier produit est stocké dans la case 0 du tableau
produits (tableau déclaré dans home-products-component.ts). Par exemple, produit[0].nom indique
le nom du premier produit.
Affichez le titre (title) du composant ainsi que la liste des produits (nom et prix).

Résultat à obtenir :

2
Directive *ngFor
Les directives sont des instructions intégrées dans le DOM. Quand Angular lit le template et
rencontre une directive qu'il reconnait, il suit les instructions correspondantes.
Au lieu d’afficher les produits un à un à la main, vous allez utiliser une boucle pour parcourir
automatiquement le tableau produits : la directive *ngFor permet de le faire :
Voici un exemple :

<h3 *ngFor="let prod of produits">{{prod.nom}} prix: {{prod.prix}}</h3>

Liaison par propriété ou "property binding"

On veut maintenant afficher les produits avec leurs images. Commencez par ajouter quelques
images aux produits :
Dans le dossier src/assets : ajoutez une image pour chaque produit (par exemple : prod1.jpg,
prod2.jpg, prod3.jpg).
Dans le fichier catalogue-produits.ts, ajoutez une image pour chaque produit (il s’agit du chemin
relatif vers le fichier images).

Maintenant il faut afficher les images de produits avec le nom et le prix. Pour ceci, utilisez le
property binding : <balise [attribut]='nomPropriété' >. N’oubliez pas d’ajouter un attribut alt
pour les images.

Exemple de résultat à obtenir (flexbox a été utilisé pour organiser l’affichage):

3
La directive *ngIf
La directive *ngIf permet d’ajouter ou de supprimer un élément du DOM selon le résultat d’un test.
Dans le fichier contenant la liste des produits, ajouter la description de quelques produits (pas tous).
En utilisant la directive *ngIf, affichez un bouton « détails » uniquement si le produit a une
description.

Ce que ça donne par exemple :

Event binding
Ce type de binding permet d’écouter les évènements du DOM (click, mouseover, keydown, submit,
focus, drop …) et d’appeler une action (méthode) de la classe du composant pour traiter cet
évènement.
Le nom de l’évènement est entouré par des parenthèses, par exemple :
<button (click)="onSave()">Save<button>
La méthode onSave() de la classe du composant est exécutée à chaque fois que l’utilisateur clique
sur le bouton.

En utilisant le event binding, écrivez le code nécessaire pour que le clic sur un bouton « détail »
provoque une alerte avec le message « Vous voulez afficher la description du produit ! »
NB. utilisez la méthode alert(message)
Voici ce que ça donne :

4
Maintenant on veut que la description du produit pour lequel on a cliqué sur le bouton Détail
s’affiche dans l’alerte. Il faut alors le passer en paramètre à la méthode onDetail :
Dans le template html :
<button *ngIf="prod.description" (click)="onDetail(prod)">Détails</button>

Apportez les modifications nécessaires au code ts du composant pour ce faire.

Résultat à obtenir: