Chargement...

ANGULAR-TUTO.COM

06 DATA BINDING

06 DATABINDING

Introduction au DataBinding dans Angular2

Le databinding est l’une des fonctionnalités les plus impressionnantes dans Angular2. Il s’agit d’un mécanisme qui permet la synchronisation instantanée entre la vue (HTML Template) et les données de l’application (L’une des propriétés du Component).
L’un des exemples les plus connus c’est lorsqu'un utilisateur écrit dans un champ text la valeur du modèle change instantanément et vis versa. Donc le databinding permet de faire la communication entre le component et sa template.
Angular2 propose plusieurs types du databinding qui seront utilisés selon le besoin. Nous allons découvrir ces types un par un (avec des exemples concrets comme d’habitude 😃)

Catégories du DataBinding

Nous avons mentionné qu’il y a plusieurs types du databinding. Nous allons regrouper ces types dans des catégories selon le sens du flux des données. Il y a deux sens pour le flux: Du component vers la template ou inversement de la template vers le component et finalement un Databinding dans le deux sens.

Catégorie Sens du Flux de données Exemple
Uni-Directionnel Du modèle -> Template {{ NomProp }}
Uni-Directionnel Du Template -> Modèle (Exemple: l'événement TextChanged) (click) = "......."on-click
Bi-Directionnel S’il change dans l’un, la modif se répercute instantanément dans l'autre input [(ngModel)]="NomHotel">

Maintenant on va décortiquer un par un les Databindings
1- Interpolation (Sens: du component vers l’affichage)

est un type de databinding il fait partie de la catégorie Unidirectionnel (Du Modèle vers la template). Donc on peut l’utiliser pour évaluer la valeur d’un component. Il suffit, tout simplement, de mettre le nom de la propriété du component dans double accolades ouvrantes et fermantes comme suivant {{ }}. et angular va se charger de chercher dans le component jusqu'à la trouver puis l'évaluer dans l’affichage.
Dans l’exemple suivant nous allons créer un nouveau component nommé hotel. Et on va utiliser l’interpolation pour envoyer des données à partir du component vers la template graphique.

Dans la partie Template du component

       template: `
 <h2> Interpolation</h2>
 <p>En utilisant l'interpolation, La valeur de la propriété "componentName" est: {{componentName}} </p>
  `  
Dans la classe du component*

  export class hotelComponent {
  componentName: string = 'hotelComponent';
 }

Le resultat sera, finalement comme suivant:
Un autre exemple
Il est possible de lier la propriété src de la balise ou élément <img> en utilisant l’interpolation. Dans la partie Template du component

<p>En utilisant l'interpolation l'image du hotel est  <img  src ="{{HotelPhoto}}" style="height:90px"></p>
      
 
Le resultat sera, finalement comme suivant:
2-PropertyBinding (Sens: du component vers l’affichage)

PropertyBinding. C’est un Binding Uni-directionnel du modèle vers la template. Comme son nom l’indique il s’agit de lier une propriété de notre component à une propriété d’un élément HTML . Pour utiliser la property Binding, il suffit de mettre la propriété dans [ ... ]. Donc le syntax doit etre comme suivant
<span [innerhtml]=”Nom_Prop_du_Component” ></span>.
Ce petit exemple permet de lier la valeur de la propriété du component à la propriété “innerhtml” de la balise “span”. Passant, maintenant à un exemple plus concret. On va reproduire la tache qu’on fait dans la première partie de l'interpolation'


<h2> PropertyBinding</h2>
  <p>En utilisant la property Binding, La valeur de la propriété "componentName" est: </p><p [innerHTML]="componentName"></p>
  <p>En utilisant la property Binding, l'image du hotel est  <img  src ="{{HotelPhoto}}" style="height:90px"></p>
Le resultat sera, finalement comme suivant: Comme vous le remarquez c’est le même exemple mais en utilisant la propertyBinding au lieu de l’interpolation afin d’envoyer des données du component vers la template.
3-Binding des événements (Sens: de l’affichage vers le component)

Dans les deux cas précédents (Interpolation et PropertyBinding), l’envoi des donnée est unidirectionnel et c’est du component vers la template. Maintenant on va étudier un autre binding unidirectionnel mais dans le sens inverse. C.a.d comment envoyer des données à partir de la template vers le component. Tout simplement c’est à travers les événements du HTML. Exemple si l’utilisateur click sur un bouton donc la valeur du champs d’enregistre. Donc le seul moyen pour savoir les actions de l’utilisateur c’est à travers l'écoute à des événements comme le click et le mouseover. Dans Angular2 vous pouvez utiliser la syntaxe suivante pour faire des appels à des événements:
<button (click)="MaFonction()">Click me!</button>
On peut aussi utiliser le préfixe “on-” juste avant le nom de l’événement à utiliser. Donc la syntaxe devient comme suivant
<button on-click="MaFonction()">Click me!</button>
La fonction nommée MaFonction doit être déclaré dans la classe du component lui même et non pas dans la template. Vous pouvez utiliser ce type de Binding avec n'importe quel “DOM EVENT”. Par exemple: click, dblclick, mousedown, mouseenter… Vous trouverez la liste complète des “DOM EVENTs” dans l’url suivante: https://developer.mozilla.org/en-US/docs/Web/Events

Dans la template on ajoute:

<h2> EventBinding</h2>
 le mot target peut etre remplacé par le nom d'événement comme click, input, mouseover ..
 <p> EventBinding en utilisant l'expression: (target) <button (click)="SayHello()">Bnjour</button></p>
 <p> EventBinding en utilisant l'expression: on-target <button (click)="SayHello()">Bnjour</button></p>
Dans la classe du component on défini la méthode:

    export class hotelComponent {
  componentName: string = 'hotelComponent';
  HotelPhoto: string   = './app/img/hotel.jpg';
  SayHello() {
 alert("Bnjr, vous etes sur le site: www.angular-tuto.com"); 
}
    
Le resultat sera, finalement comme suivant (Il suffit de cliquer sur le bouton):
4-Binding Bidirectionnel en utilisant NgModel

Pour commencer , NgModel est une directive très utilisée dans Angular2. Dans un article prochain on va parler avec plus des détails sur les directives. Le Binding Bidirectionnel permet de faire une synchronisation instantanée entre la template et la valeur de la propriété du component. Cette synchronisation est dans les deux sens. Donc si vous écrivez dans un champs text cette modif va être sauvegardée instantanément et vice versa. Si la valeur du component se change donc l’affichage de la template change aussi.
Example:

Dans la template:

<h2> Binding Bidirectionnel (ngmodel)</h2>
 <p>Cet input utilise ngModel: <input [(ngModel)]="nombrePersonnes"></p>
<p> On affiche la propriété nombrePersonnes,  en utilisant l'interpolation: {{nombrePersonnes}}</p>
Dans la classe du component:

    nombrePersonnes: string ='1';
    
Le resultat sera, finalement comme suivant (Il suffit d'ecrire dans le champs text'):
5-Binding des Classes CSS

Dans Angular2 vous pouvez changer dynamiquement la classe CSS d’un élément HTML comme DIV ou SPAN ou autre. Il suffit dans ce cas d’utiliser le ClassBinding et ajouter le préfixe “class.” (n’oubliez pas le point !!!) et le nom de la propriété [class.ma_class_css]="isClassVisible"

Dans le metadata “Style”:

  .my-class {
    background-color: yellow;
  }
Dans le metadata “Template”:

    <h2> ClassBinding</h2>
<div [class.my-class]="isClassVisible">
       Vous pouvez changer la couleur de ce Div en cliquant sur le boutons !
      </div>
       <button (click)="isClassVisible = !isClassVisible;">Cahnger le style</button>
    
Dans la classe du component :

       isClassVisible:boolean= false;
 
Le resultat sera, finalement comme suivant (Il suffit de cliquer sur le bouton'):
6-Binding des Styles CSS

Le Binding est de Style est très similaire à celui de classe. Il s'agit d'un Binding qui permet de gérer automatiquement l'une des proprité de style comme le font, la police, la couleur, la marge ...

Dans la template


<h2> StyleBinding</h2>
<p [style.font-size.em]="isFontBig ? 3 : 1" >Vous pouvez changer le font</p>
 <button (click)="isFontBig = !isFontBig;">Cahnger la largeur du font</button>
Dans la classe du component :

    isFontBig:boolean=false;
 
Le resultat sera, finalement comme suivant (Il suffit de cliquer sur le bouton'):
Vous pouvez télécharger le code source de cette seance à partir de ce lien