Le binding dans Angular

Le binding dans Angular permet de lier facilement des données de notre modèle (fichiers ts typescript) au visuel (html). Pour se faire, je vais parcourir avec vous :

• La string interpolation (binding simple)
• La property binding (binding de propriété)
• L’event binding (binding d’évènement html vers des méthodes typescript)
• le two-way binding (binding bidirectionnel)

Le binding simple ou string interpolation

Le binding simple ou string interpolation est le binding le plus basique. Imaginons une propriété dans notre composant app.component.ts : firstname. Voir le code de fichier ts ci-dessous :

...
export class AppComponent {
  ...
  firstname = 'Nicolas';
}

Pour afficher cette valeur dans notre composant au niveau html, il suffit d’utiliser la string interpolation soit {{ }}. Voici donc à quoi ressemble le code de notre composant au niveau html (app.component.html) :

<p>Prénom : {{ firstname }}</p>

Le binding de propriété ou property binding

Le binding de propriété ou property binding est le fait de lier une propriété d’un objet html à une propriété typescript. Prenons un exemple : dans notre app.component.ts, on voudrait un bouton SAUVER qui ne serait disponible que si on a un prénom et à l’initialisation de notre composant, le prénom sera vide et rempli automatiquement 5sec après initialisation. Voici le code dans app.component.ts :

...
export class AppComponent {
  firstname = '';

  constructor() {
    setTimeout(() => {
      this.firstname = 'Nicolas'
    }, 5000);
  }
}

La variable firstname est donc initialisée à blanc et dans le constructeur de notre composant (dans son initialisation donc), on le met à ‘Nicolas’ après 5000 millisecondes donc après 5secondes.

A présent, dans l’html, on va ajouter un bouton SAUVER qui sera DISABLED si la valeur firstname est vide. Pour se faire, dans l’html, on fait [htmlproperty]= »expressionJavaScript ». Voici donc le code dans app.component.html :

<button [disabled]="!firstname">SAUVER</button>

Voilà, vous savez maintenant comment binder la valeur d’une propriété html à la valeur d’une propriété qui se trouve dans le modèle typescript du composant.

Le binding sur évènement ou event binding

Le binding sur évènement ou event binding permet de réagir à un évènement d’un contrôle html et d’exécuter du javascript mais pas n’importe quoi : vous pourrez exécuter directement une méthode de votre modèle (app.component.ts pour l’exemple) ou du code ts qui utilise les variables de votre modèle directement de là.

Un exemple : vous souhaitez que le click sur le bouton SAUVER affiche une alerte avec pour message : Le prénom xxx a été sauvé en utilisant firstname qui se trouve dans votre modèle. Voici à quoi cela pourrait ressembler dans app.component.html :

<button [disabled]="!firstname" onclick="alert('Sauvegarde de ' + firstname)">SAUVER</button>

MAIS dans ce cas-ci, un code simple comme celui-ci ne fonctionnera pas. Si vous regardez les erreurs de votre navigateur, vous découvrirez qu’il ne trouve pas la variable firstname est inconnue (non définie). En effet, c’est une variable de votre modèle ts app.component.ts. Pour faire cela, il faut utiliser l’event binding. Rien de plus simple, remplacez onclick par [click] et vous passerez ainsi sur l’évènement angular click qui lui exécute bien ce qui suit en tant que typescript lié au modèle de votre composant. On va donc appeler une méthode de notre app.component.ts qui s’appellera onClick() :

<button [disabled]="!firstname" (click)="onClick()">SAUVER</button>

Dans notre fichier app.component.ts, ça donne ceci :

...
export class AppComponent {
  firstname = '';

  constructor() {
    setTimeout(() => {
      this.firstname = 'Nicolas'
    }, 5000);
  }

  onClick() {
    alert('Sauvegarde de ' + this.firstname);
  }
}

Voilà, vous savez à présent exécuter de votre modèle depuis un évènement qui se produit sur un contrôle html.

Le binding bidirectionnel ou two-way binding

Le binding bidirectionnel ou two-way binding permet d’afficher dans un contrôle html les données du modèle ts mais également de faire l’inverse : toute modification à travers le contrôle html permettra de modifier les données du modèle ts. Exemple : on a déjà une variable firstname dans notre modèle ts, ajoutons une textbox dans la partie html de notre composant pour afficher et modifier cette variable firstname. Ainsi, on a un contrôle qui est bindé en bidirectionnel sur notre variable firstname. Pour cela rien de plus simple, voici notre app.component.html :

<input type="text" [(ngModel)]="firstname">

ngModel permet de mapper justement un contôle html à une variable du modèle ts dans les 2 sens : modification et affichage.

Juste une précision : ngModel est une directive qui fait partie de FormsModule, il faut donc l’importer dans le fichier app.module.ts :

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

@NgModule({
  ...,
  imports: [
    ...,
    FormsModule
  ],
  ...

Voilà, à présent, vous pouvez ouvrir votre page et tester votre composant.

Pour résumer

Pour résumer, le binding est simplifié en Angular grâce à :

• La string interpolation pour le binding unidirectionnel d’affichage : {{ variable }}
• Le property binding permet de binder une propriété d’un contrôle html à une variable de notre modèle ts genre : <button [disabled]= »!firstname »…
• L’event binding permet de binder un évènement html à une méthode à exécuter dans notre modèle ts genre : <button (click)= »onClick() »…
• Le two-way binding permet de binder un contrôle html à une variable du modèle ts de manière à afficher sa valeur mais aussi à pouvoir la modifier à travers le contrôle html genre une textbox comme ceci : <input type= »text » [(ngModel)]= »firstname »>

Voilà, une fois cet article bien assimilé, vous avez déjà des bases solides sur le binding en Angular.

J’espère que cet article vous aura plut. N’hésitez pas à le commenter, le liker et le partager. Et pour ne rien manquer, abonnez vous à ce blog ;-). Je vous dis à très bientôt sur ce blog developpement web facile.com.