lundi 1 octobre 2018

Angular : Data binding



Laison des données : Ce "data binding" va permettre de synchroniser les données entre les composants et les vues.

Une modification d’une propriété d’un composant sera automatiquement reflétée sur l’interface, et inversement une modification d’un contrôle HTML mettra à jour les propriétés du composant.
Binding supporter par Angular (DOM <->Component):
<->
Angular a défini quatre sortes de Data Binding pour synchroniser le template et le Component:
databinding


Mécanisme du one-way binding

Veut dire que le flux du données part d'une data source à la vue 
  1. {{value}}  Interpolation template=> Ce mécanisme permet de modifier le DOM à partir du modèle, si un changement est intervenu sur une valeur de ce dernier. On peut faire des calculs ou appeler des fonctions défini dans le composant à l’intérieur {{value}}. les limitations de l’utilisation : https://angular.io/guide/template-syntax
  2. [propriete] = "valeur" : Ce mécanisme permet de valoriser une propriété d'un composant ou d'une directive à partir du modèle, si un changement est intervenu sur une valeur de ce dernier. Interpolation vs porpriete binding : https://www.codementor.io/adekunleoyaniyi/interpolation-vs-property-binding-in-angular2-eu1tzbyn4
  3. (evenement) = "fonctionHandler" : Ce mécanisme permet d'exécuter une fonction portée par un Component suite à un évènement émis par un élément du DOM.
  4. [(ng-model)] = "propriete"

--Event Binding (Laison d'evenement) : permet à une application Angular d’exécuter du code, des actions, lorsqu'un événement est levé.

il suffit de décorer de parenthèses le nom de l’événement DOM à écouter et de fournir la méthode à exécuter sur cet événement
L'objet $event : est disponible dans la variable $event fournie par Angular. 
C’est cet objet qui contient la donnée que nous voulons récupérer. 
Une première solution est de passer cet objet $event dans une méthode qui est définit dans le composant, ensuite d’aller chercher l’entrée utilisateur à l’intérieur.

Aucun commentaire:

Enregistrer un commentaire

to criticize, to improve