Quels sont les types de liaisons dans Angular?

Dans Angular, il existe plusieurs types de liaison permettant de synchroniser les données entre le composant et le modèle :

• Liaison de propriété (Property Binding) : Permet de lier la propriété HTML d'un élément à une propriété du composant. Les changements de la valeur de la propriété du composant mettent à jour la valeur de la propriété HTML. Utilise des crochets [].

  <img [src]="imageUrl" alt="Image">
  

• Interpolation : Permet d'afficher la valeur d'une propriété du composant dans le modèle sous forme de chaîne. Utilise des doubles accolades {{}}.

  <p>{{ greeting }}</p>
  

• Liaison d'événements (Event Binding) : Permet de réagir aux événements du DOM (par exemple, clics, saisie de texte) et d'appeler des méthodes du composant. Utilise des parenthèses ().

  <button (click)="onClick()">Cliquez-moi</button>
  

• Liaison bidirectionnelle (Two-Way Binding) : Combine la liaison de propriété et la liaison d'événements, permettant de synchroniser la valeur entre un élément de formulaire et une propriété du composant dans les deux sens. Utilise la syntaxe [(ngModel)]. Nécessite l'importation de FormsModule.

  <input [(ngModel)]="userName" type="text">
  

• Liaison d'attributs (Attribute Binding) : Utilisée pour lier des attributs HTML qui ne sont pas des propriétés du DOM (par exemple, colspan, aria-*). Utilise le préfixe attr..

  <td [attr.colspan]="colspanCount"></td>
  

• Liaison de classes (Class Binding) : Permet d'ajouter ou de supprimer dynamiquement des classes CSS en fonction de la valeur d'une propriété du composant.

  <div [class.active]="isActive"></div>
  

• Liaison de styles (Style Binding) : Permet de définir des styles CSS en fonction de la valeur d'une propriété du composant.

  <div [style.backgroundColor]="bgColor"></div>