Le Data Binding est un élément essentiel dans les frameworks de Single Page Application. Il permet de synchroniser la vue au modèle JavaScript sous-jacent. Voici un schéma général du fonctionnement du Data Binding :

Angular définit 4 sorte de Data binding :

• Interpolation : ce mécanisme permet de modifier le DOM à partir du modèle, si un changement est intervenu sur une valeur de ce dernier.

• Property Binding : 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.

-Event Binding : 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.

-Le "two-way" Data Binding : c'est une combinaison du Property Binding et du Event Binding sous une unique annotation.

Essayons de comprendre chacune de ces notions en image et en code

Interpolation {{ }}

La plus par du temps nous utiliserons lorsque nous voulons afficher une donnée provenant de notre typescript sur le DOM de notre page.

Voici le code typescript pour l'example

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  firstName:string = "Herve Yves";

  constructor() {}

}

Voici le code html pour l'example

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Interpolation
    </ion-title>
</ion-header>

<ion-content>
 <p>Donnée afficher par interpolation {{firstName}}</p> 
</ion-content>

Property Binding [ ]

Le property binding ou liaison par propriété est un mécanisme par lequel nous pouvons modifier la valeur de l'attribut d'un tag html ou d'un composant de manière dynamique.

Dans l'example si dessous je vais modifier le type de l'input en fonction de la valeur de la variable zoneType

Voici le code typescript pour l'example

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  zoneType:string ="password";

  constructor() {}

}

Voici le codehtml pour l'example

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      property binding
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

<div>
  <ion-input [type]="zoneType"></ion-input>
</div>

</ion-content>

SI vous changer la valeur de la variable zoneType, le type de l'input est automatiquement changé. Ici la propriété type est liée à la variable zoneType si la valeur de variable change, le type de l'input change aussi.

Event binding ( )

Lorsque nous voulons exécuter une fonction suite à un événement provoqué par un utilisateur, nous allons utiliser l'event binding. Par exemple le click sur un bouton échange une fonction.

Le code html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      property binding
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

<div>
  <ion-button click="onShowAlert()" color="success" expand="block"></ion-button>
</div>

</ion-content>

<ion-button (click)="onShowAlert()" color="success" expand="block"></ion-button>

Nous avons ici, notre bouton portant un événement de click qui fait appel à une fonction onShowAlert(). Cette fonction sera déclenchée aussitôt que l'utilisateur click sur le bouton

Le code typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {


  constructor() {}

  //code de notre fonction
  onShowAlert(){
      alert('Je suis une alert');
  }

}

Two way binding [( )]

Ce mécanisme permet, à partir d'une même notation, de modifier le modèle à partir du DOM et de modifier le DOM à partir du modèle. Nous allons beaucoup l'utiliser dans les formulaire pour récupérer les données entrées par l'utilisateur tout en lui affichant ce qu'il saisi.

Le code html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      property binding
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

<div>
  <ion-input [(ngModel)]="userName" type="text" placeholder="Donner votre nom"></ion-input>
</div>

</ion-content>

Le code typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  userName:string;


  constructor() {}

}

Le ngModel est une directive angular qui va faire permettre récupérer ce que utilisateur va saisir dans la zone de text et actualisera la variable userName dans le types. Grâce au [()] la mise à jour se fait dans les deux sens typescript vers html et html vers typescript car au fur et à mesure que l'utilisateur saisi, il peut aussi voir ce qu'il saisi en même temps.

Conclusion

Angular nous permet de manipuler les donnée dans ionic de manière très simple. D'une namière générale il existe plusieurs directive pour le faire. Je vous invite à tester ce que je viens de vous montrer et aussi d'explorer la documentation de angular pour en savoir plus.