Retour au cours

Liaison de propriété [ ]

Le Développeur Angular Complet : de Zéro à Héros

11. Liaison de propriété [ ]

L'interpolation ne fonctionne que pour afficher des valeurs sous forme de texte. La liaison de propriété (Property Binding) est utilisée pour définir dynamiquement la valeur de la propriété d'un élément HTML (ex: src, disabled, class) à partir d'une propriété de composant.

Syntaxe

La liaison de propriété utilise des crochets ([ ]) autour de la propriété de l'élément cible. La valeur à l'intérieur des guillemets est une expression TypeScript qui se résout en la valeur requise.

html <element [property-name]="componentExpression">

Exemple : Liaison de propriétés HTML standards

Classe du composant :

typescript export class ImageComponent { imagePath: string = 'assets/logo.png'; altText: string = 'Logo Angular'; isButtonDisabled: boolean = true; }

Template :

html

<img [src]="imagePath" [alt]="altText">

<button [disabled]="isButtonDisabled">Envoyer

Vérification d'accessibilité

Liaison de propriété vs d'attribut

Angular privilégie la liaison à la Propriété du DOM, et non à l'Attribut HTML.

  • Attribut : Défini dans le HTML (ex: id, type).
  • Propriété : Définie dans l'arbre DOM (ex: value, disabled).

Par exemple, l'attribut HTML value définit la valeur initiale, mais la propriété DOM value reflète la valeur actuelle (qui change au fur et à mesure que l'utilisateur tape). Angular se lie toujours à la propriété, sauf si vous utilisez explicitement [attr.name].