Welcome

Angular-Tuto.com

Angular-Tuto.com

DataBinding Angular 7

DataBinding dans Angular 7

Introduction

Comme, toujours, au démarrage, il faut s’assure que l’application et le serveur tournent avec la commande “ng serve”.
Le databinding est l’une des fonctionnalités les plus impressionnantes dans Angular. 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 (par exemple: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. Angular 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 )

Types 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 trois 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 (si on change dans le html donc la valeur du component change et inversement si suite à un traitement, la valeur du component ou sa propriété change donc le navigateur et l’affichage se rafraîchit automatiquement et instantanément).


Uni-Directionnel

Du modèle -> Template

  1. Interpolation:
    {{ NomProp }}
  2. Property Binding:
    [property] = “data”

Uni-Directionnel

Du Template -> Modèle (Exemple: l'événement TextChanged)

  1. Event Binding
    *
    (click) = "......."
    *  on-click

Bi-Directionnel

S’il change dans l’un, la modif se répercute instantanément

  1. Two-WAy-DataBinding
    input [( ngModel )]= "NomHotel" >

maintenant on va décortiquer une par une les types de Databinding

  1. Interpolation (Sens: du component vers l’affichage)

    C'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 membre (Propriété ou méthode) du component. Il suffit, tout simplement, de mettre le nom de la propriété du component dans double accolades ouvrantes et fermante 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.

    Astuce: Avec angular CLI vous pouvez créer un component en 2 secondes: Il suffit de lancer la commande suivante à la racine du projet:
    “>ng generate component hotel” DataBinding Angular 7

    On note bien que le CLI a créé 4 fichiers et qu’il a modifié le fichier “app.module.ts”.

    • Dans le fichier de la définition du component “hotelComponent.component.ts” on ajoute 3 propriété et une fonction DataBinding Angular 7
    • on change aussi la template du component et on appelle tous les membres du component en utilisant l’interpolation. DataBinding Angular 7
    • un dernier point: il faut appeler le nouveau component à patir du component app DataBinding Angular 7
    • Le rendu final sur le navigateur à l’adresse “http://localhost:4200” donne: DataBinding Angular 7

    Un autre exemple, il est possible de lier la propriété src de la balise ou élément en utilisant l’interpolation. Dans la template du component : DataBinding Angular 7 Bien sur, il faut ajouter la propriété “HotelPhoto” au component. Voir résultat: DataBinding Angular 7

  2. PropertyBinding (Sens: du component vers l’affichage)

    st un autre type du DataBinding. C’est un Binding Uni-directionnel du modèle vers la template. Comme son nom l’indique il s’agit de lier un membre du component à une propriété d’un élément HTML .

    Pour utiliser la property Binding, il suffit de mettre la propriété de l’element HTML dans [ ...]. Donc le syntax doit être 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 lier la propriété InnerHTML de la balise
    à un membre de notre component.

    DataBinding Angular 7

    Résultat:

    DataBinding Angular 7

    Comme vous le remarquez c’est le même exemple, pratiquement, 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ées est uni-directionnel 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 s’enregistre dans le membre du component.

    Donc le moyen pour savoir les actions de l’utilisateur c’est à travers l'écoute à des événements comme le click et le mouseover.
    Dans Angular vous pouvez utiliser la syntaxe suivante pour faire des appels à des événements: <button (click)="MaFonction()"> Click me! </button>

    Remarque: vous avez remarquez que pour utiliser le databinding d’une propriété HTML il suffit d’utiliser les [] (voir 2.PropertyBinding). De la même manière pour on utilise les () autours d’un événement HTML

    Et dans les deux cas Angular fait l'interprétation puis il appel la méthode ou le membre demandé.
    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ée 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:
    developer.mozilla.org
    Exemple:

    On va créer un bouton qui permet de faire une réservation dans l'hôtel (Pour le moment et pour simplifier l’exemple, le bouton va changer le message affiché et la propriété disabled du bouton)

    Étape 1
    On crée une propriété appelée message et une autre propriété booléenne nommée “Isreserved” qui montre s’il y a une réservation ou nom. Finalement on a une fonction qui s’appelle OReserve() qui permet de changer l'état de “Isreserved ”.

    DataBinding Angular 7

    Étape 2
    Maintenant il faut changer dans le fichier template du component Angular: la propriété disabled est bindée sur le membre “Isreserved”. Et l’event click est bindée sur la méthode “OnReserver()”. DataBinding Angular 7

    Résultat
    DataBinding Angular 7
    puis on click DataBinding Angular 7


    Avant de passer au type suivant de binding. on a besoin de comprendre comment utiliser “$event” dans l’event binding. “$event” permet de passer les paramètres de l'événement au component. Exemple qu’est ce que l’utilisateur a taper dans un champ ? sur quel bouton du clavier il a appuyé ? .e.t.c.

    Exemple
    Dans notre exemple on va créer un champ text (Pour récupérer le nom de la personne qui va faire la réservation dans l'hôtel) et on va récupérer ce que l’utilisateur a tapé puis on l’affiche.
    - Une variable de type string: NomClient.
    - La méthode OnEcrireNom: qui prend en paramètre un événement. Dans le core de cette méthode on récupère la valeur saisie à partir de l’event (apres faire un casting bien sur). puis on passe cette valeur à notre propriété NomClient qui sera affichée dans la suite. DataBinding Angular 7

    Le fichier HTML template est simple:
    On <input> HTML. l'événement (input) va invoquer la méthode OnEcrirNom() et on lui passe le paramètre “$event”. Finalement, on récupère ce que l’utilisateur a tapé.
    DataBinding Angular 7
    Résultat:
    DataBinding Angular 7

  4. Binding Bidirectionnel en utilisant NgModel (Dans les deux sens)

    Pour commencer ,NgModel est une directive très utilisée dans Angular. 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.

    écrivez dans un champs text cette modif va être sauvegardée instantanément dans le membre du component et vice versa. Si la valeur du component s’est changée donc l’affichage de la template change aussi.

    Important: Pour que le binding bidirectionnel fonctionne, il faut obligatoirement importer FormsModule dans le fichier Module associé. DataBinding Angular 7

    Si vous l’avez remarqué le data binding Bidirectionnel est la combinisons des deux Bindings précédents. Même à l'écriture : [propertyBinding] + (eventBinding) = [(datBinding)]. Sympa ? non?

    Example: On reproduit le même exemple précédent:
    Etape 1

    on commence par importer FormsModule dans le fichier app.Module.ts. il suffit d’importer le module et le déclarer dans la liste des imports (ligne 8 et ligne 17). DataBinding Angular 7

    Etape 2

    Dans le fichier de définition du component on déclare la propriété: DataBinding Angular 7

    Etape 3

    Il reste de modifier dans la template du component DataBinding Angular 7

    Résultat
    DataBinding Angular 7
  5. Cas Pratique 1: 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"

    Etape 1
    Ajouter la classe “my-class” au fichier de style hotel.component.css DataBinding Angular 7
    Etape 2
    ajouter une propriété au component DataBinding Angular 7
    Etape 3
    Dans le fichier de la template on a bindé la classe css de l’element en utilisant [class.my-class]=”isClassVisible” puis ajouter un bouton qui permet d’activer et désactiver l’utilisation de cette classe. DataBinding Angular 7

    Résultat: En cliquant sur le bouton “Changer le style” la paragraphe change la couleur de son arrière plan DataBinding Angular 7

  6. Cas pratique2: Binding du Style CSS

    De la même manière que la partie précédente on peut binder le style d’un élément html à une propriété du component. La solution est d’utiliser la forme suivante d'écriture [style.Propriété.attr] Notre exemple consiste à ajouter un bouton qui permet de switcher entre les tailles du Font d’un paragraphe.

    Etape 1

    dans le fichier template, lier la propriété font-size à une propriété du component nommée “IsFontBig” (ligne 47). on utilise le ternaire (xx ? yyy : zzz) pour tester si la propriété isFontBig== true dans le component dans ce cas on applique la dimension 1 du Font sinon on applique la dimension 2 du Font. Finalement, on ajoute un bouton qui permet d’inverser la valeur de la propriété “isFontBig” DataBinding Angular 7

    Etape 2

    Dans le fichier de définition de notre component, on déclare la variable isFontBig DataBinding Angular 7

    Resultat

    Il suffit de cliquer sur le bouton pour changer la taille de la police. DataBinding Angular 7

Les sources

Vous pouvez télécharger le contenu du code source à partir du lien suivant
Télécharger le dossier SRC

Le fichier telechargé est le dossier SRC (compressé) de notreapplication. Il suffit de remplacer le dossier "src" de votre projet par celui téléchargé.

Personnellement je vous conseille de suivre le tutoriel de l'article et d'ecrire le code mot à mot pour plus d'apprentissage.

Conclusion

Le concept ou l'idée du DataBinding n'est pas recentes. Plein d'autres technologies comme Microsoft WPF l'utilise depuis plusieurs années.
Par contre Angular a introduit cette technologies proprément. Et ça laisse DataBinding un critère très attractif pour choisir Angular au lieu d'autres technologies web.

Comme d'hab n'oubliez pas de laisser un petit mot en commentaire.


Commentaires (0)

Votre commentaire

  • Le Nom est obligatoire (entre 3 et 25 Lettres)
  • L'Email est obligatoire (Format valide)
  • Le Commentaire est obligatoire (entre 3 et 1000 Lettres)