Angular - 2.15 Proprieté Binding VS interpolation de chaine

Interpolation et property binding sont deux formes de data binding qui poussent une valeur depuis le code TypeScript vers le template HTML. Elles peuvent parfois sembler interchangeables, mais elles ne s'utilisent pas dans les mêmes situations. Cette leçon clarifie la distinction et donne la règle simple à retenir.

Quand utiliser quoi

• Interpolation {{ data }} : on l'utilise pour afficher du texte dans le contenu d'un élément. C'est la forme la plus naturelle pour intégrer une variable dans une phrase, un titre, un libellé.
• Property binding [property]="data" : on l'utilise pour piloter une propriété d'un élément HTML, d'un composant ou d'une directive (disabled, src, hidden, value, @Input, etc.).

Dans certains cas, les deux sont possibles. Par exemple, pour afficher le contenu d'un paragraphe, on peut écrire <p>{{ message }}</p> ou <p [innerText]="message"></p> — les deux donnent le même résultat. Dans ce genre de cas, on préfère systématiquement l'interpolation, plus lisible et plus idiomatique pour l'affichage de texte.

En revanche, dès qu'il s'agit de contrôler une propriété qui n'est pas du texte (comme disabled, src, checked, ou un @Input d'un composant enfant), il faut utiliser le property binding. Tenter d'utiliser de l'interpolation pour piloter ce genre de propriété ne fonctionne pas ou produit des comportements inattendus : par exemple, <button disabled="{{ !isReady }}"> ne désactive pas correctement le bouton, car HTML considère tout attribut disabled présent comme actif.

Règle simple à retenir : texte → interpolation, propriété → property binding. Et surtout, ne jamais mélanger les deux syntaxes sur la même propriété (par exemple [disabled]="{{ x }}") — c'est une erreur classique qui produit immédiatement une erreur de compilation.