Data binding dans le template

Le data binding, c'est le pont entre ta classe TypeScript (le composant) et son HTML (le template). Trois formes à connaître par cœur : afficher une valeur ({{ }}), pousser une donnée dans un élément ([prop]), réagir à une action ((event)). Tu as déjà fait ça en AngularJS — la syntaxe a juste changé.

1. Le data binding, c'est quoi ?

Un composant a deux faces : une classe (les données, la logique) et un template (le HTML affiché). Le data binding les synchronise automatiquement : quand la donnée change, la vue se met à jour ; quand l'utilisateur agit, la classe est notifiée. Tu n'écris jamais de code qui va « chercher l'élément et changer son texte » à la main.

2. Interpolation {{ }} — afficher une valeur

Sens : composant → vue. Tu mets une expression TypeScript entre doubles accolades, là où tu écrirais du texte. Angular l'évalue, la convertit en chaîne et l'injecte.

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

@Component({
  selector: 'app-poste',
  standalone: true,
  template: `
    <h3>{{ nom }}</h3>                          // texte dynamique
    <p>Mesure : {{ mesure }} °C</p>             // toute expression TS valide
    <p>Statut : {{ actif ? 'en service' : 'arrêté' }}</p>
  `,
})
export class PosteComponent {
  nom = 'Four A12';
  mesure = 21.4;
  actif = true;
}

Change mesure dans la classe → le <p> se met à jour tout seul. L'expression peut faire un calcul simple ou un ternaire, mais reste une expression : pas de if, pas d'affectation, pas d'effet de bord.

3. Property binding [prop] — définir une propriété

Sens : composant → vue, mais vers une propriété d'un élément (ou d'un composant enfant), pas vers du texte. On met le nom de la propriété entre crochets, et la valeur est une expression.

<!-- [disabled] cible la PROPRIÉTÉ DOM du bouton, liée à une expression -->
<button [disabled]="!actif">Lancer la mesure</button>

<!-- valeurs dynamiques : src, alt, value… entre crochets -->
<img [src]="iconeUrl" [alt]="nom">

<!-- attribut SANS propriété DOM (aria, colspan, SVG) : [attr.xxx] -->
<td [attr.colspan]="nbColonnes">{{ nom }}</td>

4. Event binding (event) — réagir à une action

Sens : vue → composant. Le nom de l'événement entre parenthèses, et à droite l'instruction à exécuter (en général un appel de méthode du composant). L'objet événement natif est disponible via $event.

<!-- (click) : on appelle une méthode du composant quand l'utilisateur clique -->
<button (click)="lancerMesure()">Mesurer</button>

<!-- $event = l'objet événement natif (ici l'event input) -->
<input (input)="onSaisie($event)" placeholder="Seuil °C">

export class PosteComponent {
  lancerMesure() {
    // la logique vit dans la classe, pas dans le template
  }
  onSaisie(e: Event) {
    const valeur = (e.target as HTMLInputElement).value;
  }
}

5. Les trois sens d'un coup d'œil (+ le bonus bidirectionnel)

Le dernier, [(ngModel)] — surnommé « banana in a box » [()] — n'est rien de magique : c'est juste un property binding [ ] + un event binding ( ) combinés sur le même champ. On le verra en détail avec les formulaires (item 14). Pour l'instant, sache juste le reconnaître.

6. Vérifie ta compréhension