Institut Supérieur des Etudes Technologiques Module développement cote-client (MDW2)

de Sidi Bouzid FrameWork Angular

Enseignant : ZOUAIDI Nabil TP4 : les composants et Liaison de données

Le but de cet atelier est de permettre à l’apprenant de :

• Créer et manipuler un composant
• Appliquer le databinding (event-binding, property-binding,
two-way databinding)
• Définir un modèle de données
• Manipuler les directives NgFor, ngIf, ngModel

Année Universitaire 2022/2023

Présentation de l’application à développer
On veut développer un site web e-commerce en utilisant le Framework Angular côté
frontend. Le site permettra de :

1. Parcourir une liste de produits

2. Commander un produit
3. Liker un produit
4. De chercher des produits selon un filtre sur les prix

La page principale de notre projet aura le rendu visuel suivant :

I) Etape A : création du composant about

1) Commencer par créer un projet portant le nom TP4-Ecommerce
Sous l’invite de commande lancer la commande de création d’un projet Angular
ng new TP4-Ecommerce
2) Lancer un terminal sous le command prompt.

Enseignant : ZOUAIDI Nabil TP4 : les composants et liaison de données Page - 1 - / 3

 3) Créer un composant Products
4) Créer un modèle de données appelé product à définir dans un sous-dossier model.
Pour cela, créer sous le dossier app le répertoire model en cliquant avec le bouton
droit de la souris sur le dossier app et choisir new directory.
Puis, clic droit sur ce nouveau dossier model et choisir nouveau fichier, nommer le
« model.ts ».
Vous allez avoir l’arborescence suivante

Définir les attributs suivants de la classe product

Ici on définit product comme étant une classe

exportable (export) pour qu’un composant
puisse l’utiliser.

5) Dans la classe du composant Products, définir une propriété ProductList comme étant
un tableau (Array) de Product .
Votre classe sera comme suit :

6) Dans la vue du composant Products, on veut afficher la liste des produits sous forme
d’un tableau html ; pour cela utiliser le code suivant :

Enseignant : ZOUAIDI Nabil TP4 : les composants et liaison de données Page - 2 - / 3

 NB : noter qu’on affecte à l’élément html table la classe Bootstrap table, donc vous
devez installer ici la bibliothèque css Bootstrap comme on a fait dans l’atelier 3.
7) Dans la vue du composant racine, ajouter un titre de niveau 1 « Application E-
commerce »
8) Inclure la vue du composant Products dans celle du composant root.
9) Maintenant on va ajouter deux boutons devant chaque produit pour réaliser les 2
fonctionnalités « like » et « buy ».

Choisir une classe bootstrap de votre choix pour chacun des 2 boutons.
10) Utiliser la technique de DataBinding appropriée sur l’attribut html disabled du bouton
« buy » pour le rendre inactif si la quantité est égale à zéro.

11) Utiliser la technique de liaison de données Event Binding pour qu’on décrémente la
quantité du produit si on clique sur le bouton « buy ».

Ici on va se servir d’un compteur de la directive structurelle *ngFor pour cibler le

produit sélectionné.

Penser à utiliser cet indice comme paramètre de la fonction associée à l’évènement

clic sur le bouton « Buy »

12) De la même manière, compléter la fonctionnalité du clic sur le bouton « like » qui
incrémente le nombre de like.
13) Dans la question 13, on veut ajouter un filtre de produit selon une plage de prix.
Rajouter deux labels et deux inputs de type numérique qui représentent le seuil prix
min et le seuil prix max.
Si on tape une valeur prix minimale ou maximale, la liste des produits affiche
seulement ceux ayant des prix compris dans l’intervalle [prix min.. prix max]. penser à
utiliser la drective *ngIf.

Ici vous allez utiliser la technique de tow-way binding entre les deux zones number et
deux nouveaux attributs PrixMin et PrixMax de la classse du composant Product.
De plus, vu qu’on ne peut pas utiliser deux directives dans la même balise, ajouter la
section <tbody>et deplacer la directive *ngFor dans <tbody>. la directive *ngIf sera
utiliser dans la balise <tr>.
Bon travail
Enseignant : ZOUAIDI Nabil TP4 : les composants et liaison de données Page - 3 - / 3