TP 3 : Binding
Objectifs :
A la fin de ce TP l’étudiant sera capable de :
✓ Utilisez des données de la classe du composant dans le template
✓ Implémentez des évènements et exécutez des fonctions
✓ Changer le comportement de l’interface graphique
1- Concept
Les interactions entre la vue et la classe du composant sont possibles avec différents types de bindings.
L’implémentation de ces bindings permet d’enrichir la vue avec des données ou de déclencher
l’exécution de code dans la classe du composant.
Le binding permet l’interfaçage entre le template et la classe du composant en :
- Faisant passer des données de la classe du composant vers le template.
- Déclenchant l’exécution de méthodes dans la classe du composant à la suite du
déclenchement d’évènements dans le template.
Le binding permet de faciliter l’implémentation de tous ces mécanismes en rendant, par exemple,
automatique :
- La mise à jour d’un élément graphique quand la valeur d’un membre a changé dans la classe
du composant,
- Déclenchant l’exécution d’une méthode quand un évènement est survenu dans un élément
HTML de la vue.
Ces mécanismes sont possibles grâce à la détection de changements effectuée par Angular.
2- Différents types du Binding
Il existe plusieurs méthodes pour effectuer le binding :
- L’interpolation permettant d’exécuter dans le template une expression Javascript pouvant
contenir des attributs provenant de la classe du composant.
- Le property binding qui permet d’effectuer un binding d’un membre de la classe du composant
vers le template.
- L’event binding permettant de déclencher un évènement dans la classe du composant à partir
d’un évènement déclenché dans un objet du DOM.
- L’attribute binding permettant d’effectuer un binding entre l’attribut d’un élément HTML et
un attribut de la classe du composant.
- Le two-way binding permettant à la fois l’échange de données entre la classe du composant
et le template (1er sens) et le déclenchement d’évènements dans la classe du composant (2e
sens).
1
3- Interpolation
C’est le binding le plus simple qui permet l’échange de données dans un sens : de la classe du
composant vers le template. Il permet d’exécuter une expression et d’utiliser directement des
membres ou des fonctions publiques de la classe du composant dans le template avec la syntaxe {{ ...
}}.
Exemple :
Dans l’application ContactManager, ajoutez la variable suivante à la classe MenuComponent
(src/app/menu/[Link]) :
export class MenuComponent implements OnInit {
user: string = "Hi Walid";
constructor() { }
ngOnInit(): void {
}
La variable ‘user ‘ est une propriété de la classe MenuComponent.
Ensuite dans le template [Link] modifiez le menu comme suite :
<header>
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
<a class="me-3 py-2 text-dark text-decoration-none" href="#">{{user}}</a>
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Ajouter</a>
<a class="me-3 py-2 text-dark text-decoration-none" href="#">Liste des
contacts</a>
</nav>
</div>
</header>
L’instruction {{user}} permet d’utiliser la valeur du membre user de la classe dans le template.
Il est possible d’exécuter une fonction et d’utiliser sa valeur de retour, par exemple :
template <a class="me-3 py-2 text-dark text-decoration-none"
href="#">{{getUser()}}</a>
composant export class MenuComponent implements OnInit {
private user: string = "Hi Walid";
2
constructor() { }
ngOnInit(): void {
}
getUser():string{
return [Link];
}
}
On exécute la fonction getUser() pour afficher sa valeur de retour. Dans la partie entre les crochets, on
peut exécuter une expression, par exemple :
<a class="me-3 py-2 text-dark text-decoration-none" ref="#">
{{getUser().toUpperCase()}}
</a>
getUser().toUpperCase() permet de transformer les lettres du titre en majuscules.
Travail à faire :
Modifiez votre application pour qu’elle affiche votre prénom en majuscule.
4- Property binding
Le property binding permet d’échanger des données de la classe du composant vers le template. Il
permet de renseigner une propriété d’un objet dans le DOM avec une valeur provenant du membre
de la classe du composant. Indirectement la propriété dans le DOM se reflète sur son équivalent au
niveau de la vue.
Par exemple, pour renseigner la propriété alt d’un élément HTML img avec un membre imgAltText
du composant, le code est :
template <a class="me-3 py-2 text-dark text-decoration-none" href="#"><img
[alt]='imgAltText' />{{getUser().toUpperCase()}}</a>
composant export class MenuComponent implements OnInit {
private user: string = "Hi Walid";
imgAltText = 'user image ';
constructor() { }
ngOnInit(): void {
}
getUser():string{
3
return [Link];
}
}
Le code [alt]='imgAltText' permet de renseigner la propriété alt de l’élément HTML avec la valeur du
membre imgAltText de la classe du composant.
Ainsi :
- [ ] est le propriété de l’élément cible du DOM
- ' ' est la source du binding dans la classe du composant.
Avec l’interpolation, on pourrait avoir un résultat similaire en utilisant l’implémentation suivante
dans le template:
<img alt='{{imgAltText}}' />
Travail à faire :
Ajoutez une balise image sans l’attribut src, mais avec l’attribut alt en affichant le message ‘Image
not found’.
L’application doit afficher le menu comme suite :
5- Attribute binding
L’attribute binding est similaire au property binding sauf qu’on utilise la syntaxe attr.<nom de
l'attribut> pour désigner l’attribut de l’élément HTML.
Ainsi pour effectuer un binding entre le membre imgAltText de la classe du composant et l’attribut
alt d’un élément img, la syntaxe est :
<img [[Link]]='imgAltText' />
6- Event binding
L’event binding permet d’exécuter du code dans la classe du composant à partir d’évènements
déclenchés sur un élément du DOM.
Par exemple, pour exécuter la méthode deleteContact() dans la classe du composant à partir d’un
clique sur un bouton, l’implémentation est:
Template <button (click)='deleteContact()' type="button" class="btn
([Link])
btn-danger">Delete</button>
Composant export class ContactListComponent implements OnInit {
constructor() { }
4
ngOnInit(): void {
}
deleteContact():void{
confirm("Voulez-vous supprimer le contact");
}
}
Ainsi l’évènement click dans le code HTML déclenche l’exécution de la méthode deleteContact().
Cet exemple permet de montrer l’exemple d’event binding entre un élément HTML et une méthode
dans la classe du composant.
Résulat :
Travail à faire :
La fonction confirm retourne un booléen, modifiez le code de la fonction deleteContact pour afficher
les messages suivants :
- « Contact supprimé » : si l’utilisateur clique sur le bouton « Ok »
- « Action annulé » : si l’utilisateur clique sur le bouton « Annuler »
Implémenter l’action click sur tous les boutons « Delete »
Implémenter l’action click sur tous les boutons « Delete ».
Répéter le même travail pour le bouton « Edit ».
Changer tous les textes des interface graphiques en Français.
7- Tow way binding
A voir dans les prochaines TPs
5
Résumé :
- Interpolation : {{variable/fonction}}, la variable ou la fonction doit être définie dans la classe
du composant
- Property binding : [property]=’variable/fonction’, la variable ou la fonction doit être définie
dans la classe du composant
- Attribute binding : [[Link]] =’variable/fonction’
- Event binding : (event) =’fonction’, la fonction est définie dans la classe
- Tow way binding : a voir dans les prochaines TPs