CHAPITRE 8 : LA LIAISON DE DONNÉES

La liaison de données (data binding) relie la classe et le template. C'est ce qui rend Angular si confortable : plus besoin d'aller chercher un élément pour le modifier à la main.

Les quatre formes

Un moyen mnémotechnique : les crochets font entrer la donnée dans le template, les parenthèses font sortir l'événement vers la classe. Les deux réunis, [()], forment ce qu'on appelle la « boîte à bananes ».

1. Property binding : [propriete]

export class AppComponent {
  urlImage = 'assets/photo.jpg';
  boutonDesactive = true;
  texteAide = 'Entrez votre matricule';
}

<img [src]="urlImage" alt="Photo">
<button [disabled]="boutonDesactive">Valider</button>
<input [placeholder]="texteAide">

Sans crochets, disabled="boutonDesactive" passerait la chaîne de caractères « boutonDesactive ». Avec crochets, Angular évalue l'expression. C'est une erreur très courante au début.

2. Event binding : (evenement)

export class CompteurComponent {
  compteur = 0;

  incrementer() {
    this.compteur++;
  }

  reinitialiser() {
    this.compteur = 0;
  }
}

<p>Valeur : {{ compteur }}</p>
<button (click)="incrementer()">+1</button>
<button (click)="reinitialiser()">Reinitialiser</button>

On peut récupérer l'événement avec $event :

<input (input)="surSaisie($event)">

surSaisie(evenement: Event) {
  const cible = evenement.target as HTMLInputElement;
  console.log(cible.value);
}

3. Two-way binding : [(ngModel)]

Le champ met à jour la propriété, et la propriété met à jour le champ.

<input [(ngModel)]="nom" placeholder="Votre nom">
<p>Bonjour {{ nom }}</p>

Tapez dans le champ : le paragraphe se met à jour lettre après lettre.

Indispensable : ngModel exige l'import de FormsModule dans app.module.ts. Sans cela, rien ne fonctionne et le message d'erreur est déroutant.

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

@NgModule({
  imports: [BrowserModule, FormsModule],
  ...
})
export class AppModule { }

4. Un exemple complet

export class InscriptionComponent {
  nom = '';
  accepteConditions = false;

  get formulaireValide(): boolean {
    return this.nom.trim().length > 2 && this.accepteConditions;
  }

  envoyer() {
    alert(`Inscription de ${this.nom} enregistree`);
  }
}

<input [(ngModel)]="nom" placeholder="Nom complet">

<label>
  <input type="checkbox" [(ngModel)]="accepteConditions">
  J'accepte les conditions
</label>

<button [disabled]="!formulaireValide" (click)="envoyer()">
  S'inscrire
</button>

<p>Bonjour {{ nom }}</p>

Le bouton s'active tout seul dès que les conditions sont réunies : aucune ligne de code d'affichage à écrire.

À retenir

• Crochets : la donnée entre. Parenthèses : l'événement sort
• Sans crochets, la valeur est traitée comme du texte
• [(ngModel)] relie dans les deux sens
• FormsModule est obligatoire pour ngModel