Angular - 2.14 Propriété Binding

Après l'interpolation de chaîne, qui sert à afficher du texte, Angular propose un second mécanisme pour faire descendre des données du composant vers le template : la liaison de propriété (property binding). Elle ne sert pas à afficher du texte, mais à modifier dynamiquement une propriété d'un élément HTML, d'une directive ou d'un composant.

La syntaxe des crochets

La liaison de propriété s'écrit en entourant le nom de la propriété de crochets [ ]. À droite du signe égal, on place une expression TypeScript que Angular évalue puis affecte à la propriété. Prenons un bouton que l'on souhaite activer ou désactiver selon une variable du composant :

// servers.component.ts
export class ServersComponent {
  allowNewServer = false;

  constructor() {
    setTimeout(() => {
      this.allowNewServer = true;
    }, 2000);
  }
}

<!-- servers.component.html -->
<button class="btn btn-primary" [disabled]="!allowNewServer">
  Ajouter un serveur
</button>

Ici, la propriété disabled du bouton est liée à l'expression !allowNewServer. Tant que allowNewServer vaut false, le bouton reste désactivé. Le setTimeout du constructeur passe la variable à true après deux secondes : Angular détecte le changement et réactive automatiquement le bouton, sans aucune ligne de code supplémentaire.

Propriété DOM, pas attribut HTML

Un point essentiel à comprendre : la liaison de propriété cible la propriété de l'objet DOM, et non l'attribut HTML statique. Écrire disabled="true" en dur fige la valeur dans le HTML ; écrire [disabled]="..." connecte l'élément à l'état vivant de votre composant. C'est ce qui rend l'interface réactive : dès que la donnée change côté TypeScript, le rendu se met à jour.

La liaison de propriété fonctionne avec n'importe quelle propriété d'élément : [src] d'une image, [value] d'un champ, [hidden] d'un bloc, mais aussi avec les propriétés personnalisées de vos propres composants, comme vous le verrez plus loin dans le cours. C'est l'un des piliers de la communication de données dans une application Angular.