Mini Projet Web LGLSI-2
Tutorial 2 : Angular
Partie 2 : Data Binding
Objectif :
» Savoir comment se fait la communication entre les fichiers html et Ts d’un composant.
» Savoir comment un Composant parent transmet des données au composant fils : @Input
Activité 1 : Création du composant Product
1. Créer un nouveau projet Angular et y ajouter bootstrap.
2. Ajouter un composant Product (ng g c product --skip-tests). Vérifier la création des 3 fichiers
relatifs au composant.
3. Le composant Product s’occupe des données relatives à un produit (titre, prix et image). Ceux
sont ainsi les attributs (propriétés) de ce composant.
a. Le fichier .ts du composant doit déclarer les attributs correspondant (suivre le nom de
l’attribut par le symbole ! pour informer Angular que l’attribut sera initialisé après).
b. Le composant doit implémenter la fonction ngOnInit() qui sera appelée après la création
du composant afin d’initialiser ses attributs. Elle sera appelée automatiquement par
Angular après son constructeur s’il on possède.
Page | 1
Fichier product.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-product',
standalone: true,
imports: [],
templateUrl: './product.component.html',
styleUrl: './product.component.css'
})
export class ProductComponent implements OnInit{
//les attributs : les données manipulés par le composant
title! : string;
price!: number; Structure
image!:string; logique du
composant
//une fonction qui sera appelée après la création du composant Que doit-il
ngOnInit(): void { faire ???
this.title ='iPhone 9';
this.price = 549;
this.image ='https://cdn.dummyjson.com/product-images/1/thumbnail.jpg';
}
//ajouter les méthodes nécessaires pour manipuler les attributs
c. Pour voir le composant, vous devez l’appeler dans le composant principal
(app.component.html) à travers son sélecteur <app-product>
Fichier app.component.html
<div class="wrapped">
<div class="container">
<div class="row">
<app-product></app-product>
</div>
</div>
</div>
4. Tester
Activité 2 : Affichage des données du composant Product
Le Data Binding (Echange de données) entre le fichier TypeScript et le fichier Html dans Angular est
réalisé à travers : interpolation, property binding, event binding, et Two Way.
Page | 2
Tableau 1: Types de Data Binding Angular
Type symbole rôle exemple
Interpolation {{ nom_attribut}} Affiche le contenu //afficher le titre
de l’attribut
(.ts .html) {{title}}
(.ts)dans le fichier
Html
Property binding [attribut_html] Associe la valeur //associer valeur de src à
d’un attribut_html l’attribut image
(.ts .html)
à un attribut
<img [src]= "image ">
typescript du
composant
Event binding (event) = "fonction" Associe une //click sur bouton affiche
fonction typescript une alert
(.html .ts)
du composant à un
<button
évènement event
(cick)="fonction"></button>
Two Way Binding [(ngModel)] = Tout changement <input type="text"
(.ts
.html ) nom_attribut d’un attribute en .ts [(ngModel)]=’nom_attribut’>
sera transmit au
.html et
inversement
Voici les modifications à faire dans le fichier product.component.html :
a. Pour afficher la valeur de l’attribut title : {{title}}
b. Pour afficher l’image (valeur se trouve dans l’attribut image): <img [src] = "image">
c. Ajouter un bouton qui augmente de 10 le prix d’un produit :
product.component.html <button (click)="addPrice()">AddPrice</button>
//une méthode à ajouter dans la classe ProductComponent
product.component.ts addPrice() { this.price += 10;}
d. Ajouter un bouton qui modifie la valeur du prix (saisie dans un input). Il faut alors récupérer le
contenu de l’input en lui associant un id qui sera transmit par la suite comme argument de la
fonction modifierPrix(…)
Page | 3
Identifiant de l’input p : de type HTMLSelectElement
product.component.html
<input type="number" placeholder="modifier prix" #p>
<button class="btn btn-success" (click)="modifierPrix(p)">Ok</button>
product.component.ts
//une méthode à ajouter dans la classe ProductComponent
modifierPrix(x:HTMLInputElement)
{
try{
this.price = parseInt(x.value);;
}
catch(_) {alert("Prix invalide");}
}
e. Ajouter une zone de texte permettant d’afficher et de modifier le titre (bidirectionnelle)
<input type="text" [(ngModel)]="title"><br>
NB : afin de pouvoir utiliser ngModel, vous ajouter dans le fichier product.component.ts :
- import { FormsModule } from '@angular/forms';
- imports: [FormsModule]
Activité 3 : les directives ngFor et ngIf
!! Vous devez utiliser ngIf (pour des structures conditionnelles) et ngFor (pour des structures
répétitives) au sein d’un sélecteur Html ou d’un sélecteur relatif à un composant
ngIf // le contenu du div sera affiché si la condition est vérifiée
<div *ngIf="condition">Content to render when condition is true</div>
(simple)
ngIf <div *ngIf="condition; else elseBlock">
(avec bloc Content to render when condition is true
else)
</div>
<ng-template #elseBlock>Content to render when condition is false </ng-template>
Page | 4
ngFor //items : liste quelconque
<p *ngFor="let item of items >
{{item}}
</p>
Modifions product.component.html
- d’afficher le title s’il n’est pas null
- afficher les catagories auquel appartient le produit : ajouter l’attribut categories ([]string)au
produit et afficher la liste de produits
NB : afin de pouvoir utiliser ngIf et ngFor, vous ajouter dans le fichier product.component.ts :
- import { NgIf, NgFor } from '@angular/common';
- imports: [NgIf, NgFor]
Code final du composant Product
product.component.html
<div class="card" style="width: 18rem;">
<img [src]="image" class="card-img-top" >
<div class="card-body">
<h5 class="card-title" *ngIf="title!= null">
Title: {{product.title}}
</h5>
<p class="card-text">Price : {{price}}</p>
<p>Categories</p>
<p *ngFor="let c of categories">
{{c}}
</p>
<input type="text" [(ngModel)]="title"><br>
<input type="number" placeholder="modifier prix" #p>
<button class="btn btn-success"(click)="modifierPrix(p)">Ok</button>
</div>
</div>
<button class="btn btn-primary" (click) = "addPrice()">Add Price</button>
Page | 5
product.component.ts
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-product',
standalone: true,
imports: [FormsModule],
templateUrl: './product.component.html',
styleUrl: './product.component.css'
})
export class ProductComponent implements OnInit{
//les attributs
title! : string;
price!: number;
image!:string;
categories:string[];
//une fonction qui sera appelée après la création du composant
ngOnInit(): void {
this.title ='iPhone 9'; this.price = 549;
this.image ='https://cdn.dummyjson.com/product-images/1/thumbnail.jpg';
this.categories= ['c1', 'c2'];
}
//fonction appelée au click sur le bouton add Price
addPrice() {this.price += 10;}
//une fonction appelée au click sur le bouton Ok
modifierPrix(x:HTMLInputElement)
{
try{
this.price = parseInt(x.value);
}
catch(_) {alert("Prix invalide");}
}
}
Activité 4 : Création du composant ListeProduct/ Partage entre parent et enfant
Notre objectif maintenant est d’afficher une liste de produits sous forme d’un tableau HTML. Ainsi,
nous aurons 2 composants : le premier affichera la liste des produits et un autre qui affichera tous
les détails relatifs à ce produit.
Page | 6
Travail à faire :
- Créer une interface (ou une classe) TypeScript représentant le type gérer par l’application :
Product. La création de cette interface a pour objectif de forcer les types des données
manipulés
- Créer un composant qui affiche une liste de produits.
- Créer un composant qui affiche les détails d’un produit parmi ceux de la liste (composant
personnalisé)
Etape 1 : interface Product
1. Pour créer une interface (classe avec des attributs et des méthodes sans implémentation),
exécuter la commande ng g interface product
2. Y ajouter les attributs nécessaires
export interface Product {
//tous les attributs sont par défaut public
title?:string; //pouvant être null
price:number;
image?:string;
categories : string[];
}
Etape 2 : Modification Composant Produit
Le composant produit doit recevoir un objet produit comme input de son composant parent
ListProduct.
1. Modifions product.component.ts en supprimant ses attributs et les remplacer par un objet
« product » de type product
…..
export class ProductComponent {
//un attribut product dont les données sont venues du parent
@Input() product!:Product;
….
}
2. Ajouter les modifications nécessaires dans la partie ts et html pour le bon fonctionnement du composant
NB : afin de pouvoir utiliser @Input(), vous ajouter dans le fichier product.component.ts :
- import { Input } from '@angular/core';
- imports: [Input]
Page | 7
Etape 2 : Composant ListProduit
Pour le moment, nous allons créer une liste statique de produits et afficher ensuite les détails de
chaque produit.
- Liste-products.component.ts : Création d’une liste statique de produits
- Liste-products.component.html : affichage des produits, chaque produit sera affiché par
l’intermédiaire du component product.
Liste-products.component.ts (ajouter les imports nécessaires)
export class ListeProductsComponent implements OnInit {
//attribut : liste de produits ne pouvant pas être null
liste ! : Product[];
//initialisation de la liste de produits
ngOnInit(): void {
this.liste = [
{title:"iPhone 9", price:567, image:"https://cdn.dummyjson.com/product-
images/1/thumbnail.jpg", categories:['c1', 'c2','c3'] },
{title:undefined, price:800, image:"https://cdn.dummyjson.com/product-
images/2/thumbnail.jpg",categories:[ 'c2','c3'] },
{title:"Samsung Universe 9", price:870, image:"https://cdn.dummyjson.com/product-
images/3/thumbnail.jpg",categories:['c1', 'c2'] }
];
}
}
Liste-products.component.html
<div *ngIf="liste==null; else elseBlock">liste vide</div>
<ng-template #elseBlock>
<div class="row">
<app-product *ngFor="let p of liste" [product]="p">
</app-product>
</div>
</div>
</ng-template>
Page | 8
