Angular 2 – Databinding (liaison de donnée)

Les 4 méthodes de liaison de données sont :

Interpolation de chaîne (String Interpolation)
Liaison de propriété (Property Binding)
Liaison d’événement (Event Binding)
Liaison bilatérale (Two-Way Binding)

Interpolation de chaîne

Déjà vu avec la paramètre title de la classe AppComponent utilisé dans le template HTML du composant : {{title}}

Liaison de propriété

Ce sont les données de Javascript (ou plutôt Typescript) qui son accessibles dans les templates des composants.

Cette liaison s’applique sur les propriétés du DOM comme : value, hidden, src, alt, …
Exemples de propriétés du DOM :

<div hidden>Texte secret</div>
<button disabled>Votre panier</button>
<img alt="Description de l'image">
<img src="image.jpg">

<div hidden>Texte secret</div>

<button disabled>Votre panier</button>

Les exemples ci-dessus pourraient apparaitre ainsi dans les templates des composants :

<div [hidden]="!utilisateur.estAdmin">Texte secret</div>
<button [disabled]="estInactif">Votre panier</button>
<img [alt]="image.description">
<img [src]="image.nom">

<div [hidden]="!utilisateur.estAdmin">Texte secret</div>

<button [disabled]="estInactif">Votre panier</button>

Commentaires du code ci-dessus :

L’élément ‘Texte secret’ est caché si le champ booléen estAdmin de l’objet utilisateur est faux
L’élément ‘Votre panier’ est désactivé si le booléen estInactif est vrai
Mettre l’attribut alt à la valeur de l’objet image.description
Insérer l’image dont le nom est la valeur du champ nom de l’objet image

Autres exemples :

<input name='titre' value='Un titre'> → texte fixe ‘Un titre’
<input name='titre' value='{{title}}'> → string interpolation de title
<input name='titre' [value]='title'> → property binding de value avec la valeur de title
<input name='titre' bind-value='title'> → alternative aux crochets

Liaison de style CSS

Au même titre qu’une liaison de propriété, on peut faire une liaison de classe pour appliquer ou non un style CSS. Ceci se fait à l’aide de la liaison de propriétés spéciales Angular : [ngClass] et [ngStyle].

Soit bordure une classe définie dans le template CSS du composant.
Le code <p [ngClass]="{bordure : true}">Blabla...</p> active la classe bordure parce que la valeur de la liaison de propriété ngClass est à true. On peut remplacer true par un appel à une méthode de la classe du composant en question : [ngClass]="{bordure : active()}"
ngStyle fonctionne plus directement en proposant une liaison à un style explicite directement dans le code : <p [ngStyle]="{color:'blue'}">Blabla...</p>. Ne pas oublier les apostrophes autour de la valeur de la propriété CSS.

Liaison d’événement

Quand l’interface envoie des événements au code Javascript, comme un clic de souris (click), un survol de souris (mouseover) ou une pression sur une touche (keydown).

Exemple : Un bouton pour incrémenter une donnée :
Dans le template HTML : <button (click)="upQuantite()" > + </button>
Dans le code :

export class unComposant {
 ...
 upQuantite() { // incrémenter la quantité qd elle ne dépasse pas le stock
   if (produit.quantite < produit.stock) produit.quantite++;
 }
}

export class unComposant {

...

upQuantite() { // incrémenter la quantité qd elle ne dépasse pas le stock

if (produit.quantite < produit.stock) produit.quantite++;

}

On peut écouter tout événement standard du DOM (onclick, onmouseover, …) en l’enveloppant entre parenthèses et
enlevant le « on » au début du mot.
Exemples :

<div (mouseover)="appelMethode()">
<input (blur)="appelMethode()">
<input (focus)="appelMethode()">
<input type="text" (keydown)="appelMethode()">
<form (submit)="appelMethode()">

Parfois, on a besoin de données supplémentaires d’un événement, comme la touche enfoncée ou les coordonnées de la souris est à l’écran.
L’objet event est fait pour cela. Le paramètre $event est transmis aux méthodes :

Dans le template HTML :

<input type="text" (keydown)="montrerTouche($event)">

1	<input type="text" (keydown)="montrerTouche($event)">

Dans le code du composant :

montrerTouche(event) {
  alert(event.keyCode);
}

montrerTouche(event) {

alert(event.keyCode);

}

Noter le $ devant event dans l’appel de la méthode, pas dans la définition.

Dans le template HTML :

<h2 (mouseover)="coords($event)">Survoler</h2>

1	<h2 (mouseover)="coords($event)">Survoler</h2>

Dans le code du composant :

coords(event) {
  console.log(event.clientX + ", " + event.clientY);
}

coords(event) {

console.log(event.clientX + ", " + event.clientY);

}

On peut également appeler event.preventDefault(); pour empêcher un lien cliqué de suivre sa cible ou un formulaire de lancer son action.

Evénements par défaut (cycle de vie d’un composant)

Ces événements s’exécutent automatiquement et permettent d’agir à tous les instants de la vie d’un composant.

   ngOnInit () {
     // S'exécute après la création du composant. C'est le meilleur endroit où on peut initialiser les propriétés.
   }
   ngOnDestroy () {
     // Comme son nom l'indique.
   }
   ngDoCheck () {
     // Détection de changement personnalisé
   }
   ngOnChanges (changements) {
     // Appelé juste après que nos liaisons de propriétés ont été vérifiées et seulement
     // si l'une des liaisons a changé.
     // "changements" est un objet de la forme : {'prop': ProperiétéMàJ}
   }
   ngAfterContentInit () {
     // Le contenu du composant a été initialisé
   }
   ngAfterContentChecked () {
     // Le contenu du composant a été vérifié
   }
   ngAfterViewInit () {
     // Les vues des composants sont initialisées
   }
   ngAfterViewChecked () {
     // Les vues des composants ont été vérifiées
   }

ngOnInit () {

// S'exécute après la création du composant. C'est le meilleur endroit où on peut initialiser les propriétés.

}

ngOnDestroy () {

// Comme son nom l'indique.

}

ngDoCheck () {

// Détection de changement personnalisé

}

ngOnChanges (changements) {

// Appelé juste après que nos liaisons de propriétés ont été vérifiées et seulement

// si l'une des liaisons a changé.

// "changements" est un objet de la forme : {'prop': ProperiétéMàJ}

}

ngAfterContentInit () {

// Le contenu du composant a été initialisé

}

ngAfterContentChecked () {

// Le contenu du composant a été vérifié

}

ngAfterViewInit () {

// Les vues des composants sont initialisées

}

ngAfterViewChecked () {

// Les vues des composants ont été vérifiées

}

Liaison bilatérale

Ou comment peut-on lier les propriétés de notre composant à notre HTML, mais aussi écouter les événements et garder les choses en synchronisation. C’est le cas par exemple d’une zone de texte qui doit rester synchronisée : le code agit sur l’affichage HTML; mais également la manipulation dans l’interface doit agir sur les propriétés du composants.

Exemple de base :

<input type="text" 
    [value]="produit.quantite" // Rien de nouveau : liaison de propriété (JS -> HTML)
    (input)="produit.quantite = $event.target.value"> 
             // On a besoin d'écouter l'événement d'entrée sur notre boîte de saisie.
             // On met donc à jour la propriété produit.quantite par la valeur saisie dans la cible de l'événement ($event.target.value)
             // (HTML -> JS)

<input type="text"

[value]="produit.quantite" // Rien de nouveau : liaison de propriété (JS -> HTML)

(input)="produit.quantite = $event.target.value">

// On a besoin d'écouter l'événement d'entrée sur notre boîte de saisie.

// On met donc à jour la propriété produit.quantite par la valeur saisie dans la cible de l'événement ($event.target.value)

// (HTML -> JS)

Ceci fonctionne mais fastidieux => Utilisation de [(ngModel)] :

<input type="text" [(ngModel)]="produit.quantite">

1	<input type="text" [(ngModel)]="produit.quantite">

Au préalable, il faut importer le module qui traite des formulaire : FormsModule :

...
import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [..., FormsModule],
  ...
})
...

...

import { FormsModule } from '@angular/forms';

@NgModule({

imports: [..., FormsModule],

...

})

...

Remarque syntaxique : La combinaison des crochets et parenthèses [(mot)] pour rappeler qu’on utilise la liaison de propriété [mot] mais aussi la liaison d’événement (mot).

Mettre à jour une propriété d’un composant depuis un autre :

Soit donnee une propriété de la classe du composant AutreComponent :

export class AutreComponent {
  @input() donnee : number = 1;
}

export class AutreComponent {

@input() donnee : number = 1;

}

L’ajout de @input() devant la propriété donnee la rend éligible à la modification depuis l’extérieur. Si on utilise alors dans le template du composant utilisateur le tag de notre composant ainsi :

<app-autre [donnee]="20"></app-autre>

1	<app-autre [donnee]="20"></app-autre>

donnee aura la valeur 20 dans l’affichage du template AutreComponent (au lieu de 1).

Attention : ne pas oublier d’importer le composant Input depuis le noyau Angular.

Laissez un commentaire Annuler la réponse.

2 commentaires sur “Angular 2 – Databinding (liaison de donnée)”

Répondre ↓

Ben Said Saameh 9 février 2017 à 14 h 52 min

Je trouve que Angular2 est une technologie très interessante
– Utilisation de concept des composants
– Il supporte plusieurs languages comme TypeScript
– Utilisation de l’orienté objet dans un script
– La performance
– La grande communauté
– Il est facilement testable et maintenable
– Aussi l’utilisation de l’injection des dépendences
Vous pouvez visiter mon site pour angular2
http://www.angular-tuto.com
- Répondre ↓
  
  ali Auteur du billet 6 mars 2017 à 8 h 51 min
  
  Merci pour votre commentaire et la suggestion du site…

Dr. Ali EDDBALI

Maître de conférences | Université d'Orléans