Le binding de propriété

Le binding de propriété est une syntaxe qu’on peut utiliser dans un template de composant Angular et qui permet de rendre le HTML dynamique.

Qu’est-ce que le binding de propriété ?

Le binding de propriété permet de rendre dynamiques les balises HTML qui se trouvent dans le template d’un composant.

Concrètement, il permet de modifier l’attribut src d’une image (<img src="...">) pour lui associer le chemin d’une image récupéré dans la base de données. Ou l’attribut “class” d’un lien (<a class="...">) pour par exemple lui ajouter/retirer dynamiquement une classe CSS et générer un effet allumé/éteint.

Syntaxe générale

<balise [proprieteDOM]="expression"></balise>

expression est “un petit bout de code qui sera évalué et doit renvoyer une valeur correspondant à la propriété”. Notez qu’il ne faut pas mettre d’accolades autour de l’expression !

Exemples de bindings de propriété

Classe :

export class MeteoComponent {
  form = new FormGroup(...);

  // Propriétés
  isReady = false;
  weather = {
    type: 'ensoleillé',
    icon: 'images/soleil.jpg'
  };

  // Méthode
  isValid(): boolean {
    return this.form.valid;
  }
}

Template :

<p [hidden]="isReady">
  Chargement en cours...
</p>

<img [src]="weather.icon">     // OUI
<img src="{{ weather.icon }}"> // NON

<button [disabled]="!isValid()">
  Enregistrer
</button>

<!-- CSS -->
<p [style.display]="isReady ? 'none':'block'">
  Chargement en cours...
</p>
<p [class.jaune]="weather.type==='ensoleillé'">
  Voici le temps qu'il fait...
</p>

Remarque : Ce n’est pas une bonne idée d’écrire <img src="{{weather.icon}}">. En effet, le navigateur va essayer de récupérer l’image dès qu’il lira l’attribut src, et réalisera une requête HTTP sur l’URL {{weather.icon}}, qui n’est pas une URL valide…

Dans AngularJS 1.x, on utilisait d’ailleurs la directive ng-src pour résoudre ce problème : . L’attribut ng-src était ignoré par le navigateur (car non-standard) et remplacé après compilation par Angular par un attribut src standard. 


Informations

Tags : templates

Dernière mise à jour :

Auteur : AngularChef

Qualité : Pas finalisé