Angular 2 – Databinding (liaison de donnée) 2


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.

property_binding

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

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

Commentaires du code ci-dessus :

  1. L’élément ‘Texte secret’ est caché si le champ booléen estAdmin de l’objet utilisateur est faux
  2. L’élément ‘Votre panier’ est désactivé si le booléen estInactif est vrai
  3. Mettre l’attribut alt à la valeur de l’objet image.description
  4. 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).

event_binding

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

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 :

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 :

Dans le code du composant :

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

Dans le template HTML :

Dans le code du composant :

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.

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.

two-way_binding

Exemple de base :

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

Au préalable, il faut importer le module qui traite des formulaire : 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 :

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 :

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

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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