Angular - 2.14 Propriété Binding

Le property binding est une forme de data binding qui permet de lier dynamiquement une propriété d'un élément HTML, d'un composant ou d'une directive à une expression TypeScript. Sa syntaxe est facilement reconnaissable : on entoure le nom de la propriété cible par des crochets, comme dans <button [disabled]="!allowNewServer">Ajouter</button>.

Cette syntaxe diffère de l'interpolation par sa cible : l'interpolation insère du texte dans le contenu d'un élément, alors que le property binding pilote l'état d'une propriété (attribut DOM, input d'un composant, propriété d'une directive). On peut ainsi désactiver un bouton, lier la source d'une image, contrôler la classe CSS active, transmettre une valeur à un composant enfant via un @Input, etc.

Exemples typiques

• [disabled]="!isReady" — désactive un bouton tant qu'une condition n'est pas remplie.
• [src]="imageUrl" — lie l'URL d'une image à une propriété du composant.
• [innerText]="message" — équivalent au property binding du texte (alternative à {{ message }}).
• [user]="currentUser" — passe une donnée à un composant enfant qui déclare @Input() user.

À savoir : les crochets sont la marque d'un property binding et non d'un simple attribut HTML. Sans crochets, disabled="false" ne fonctionne pas comme attendu, car HTML interprète tout attribut disabled présent comme « actif », quelle que soit sa valeur. Avec [disabled]="false", on lie la propriété DOM disabled à l'expression TypeScript, et la logique fonctionne correctement.

Le property binding est donc plus puissant et plus précis que la simple interpolation. Dans la prochaine leçon, nous comparerons les deux pour bien identifier dans quel cas utiliser l'un ou l'autre, et nous verrons que selon le contexte, ils sont parfois interchangeables mais que le choix a un impact sur la lisibilité du code.