Le property binding dans Angular

Le property binding dans Angular vous permet de définir les valeurs des propriétés des éléments HTML, des composants Angular et plus encore.

Utilisez le property binding pour définir dynamiquement les valeurs de propriétés et d'attributs. Vous pouvez par exemple activer ou désactiver des fonctionnalités d'un bouton, définir des chemins d'image par programmation et partager des valeurs entre composants.

Dans cette activité, vous allez apprendre à utiliser le property binding dans les templates.

Pour lier un attribut d'un élément, entourez le nom de l'attribut de crochets. Voici un exemple :

<img alt="photo" [src]="imageURL" />

Dans cet exemple, la valeur de l'attribut src sera liée à la propriété de classe imageURL. Quelle que soit la valeur de imageURL, elle sera définie comme attribut src de la balise img.

1. Ajouter une propriété nommée isEditable

   Mettez à jour le code de app.ts en ajoutant à la classe App une propriété nommée isEditable, avec la valeur initiale true.

   export class App {
     isEditable = true;
   }

2. Lier contentEditable

   Ensuite, liez l'attribut contentEditable du div à la propriété isEditable en utilisant la syntaxe [].

   @Component({
     ...
     template: `<div [contentEditable]="isEditable"></div>`,
   })

Le div est maintenant modifiable. Beau travail 👍

Le property binding est l'une des nombreuses fonctionnalités puissantes d'Angular. Pour en savoir plus, consultez la documentation Angular.