La liaison de données Angular est un sujet important lorsqu’il s’agit de passer des données entre les composants au DOM. Dans cet article, je vais discuter de la liaison de données unidirectionnelle et bidirectionnelle.
C’est une méthode de liaison de données unidirectionnelle. Si nous utilisons la liaison de données unidirectionnelle, nous ne pouvons lier les données que du composant à la vue ou de la vue au composant. Il existe de nombreuses façons différentes d’utiliser la liaison de données à sens unique dans notre application Angular.
- La liaison par interpolation
L’interpolation est une méthode très courante que nous utilisons pour lier les données dans Angular et cela fait référence à la liaison des valeurs dans les éléments de l’interface utilisateur.
Comme le montre l’exemple à propos, nous pouvons utiliser la variable liée dans les éléments HTML en ajoutant des crochets curly comme {{Nom}}. Cette méthode est surtout utilisée lorsque nous avons besoin de concaténer deux valeurs, par exemple : {{FirstName}}. {{Nom}}.
2. liaison de propriété.
C’est une autre approche largement utilisée pour lier les données et avec cette méthode, nous pouvons lier les valeurs des composants dans les propriétés DOM des éléments HTML.
Si nous utilisons l’interpolation dans de telles situations le bouton sera toujours désactivé négligeant la valeur de la variable.
3. liaison d’attribut
La liaison d’attribut est utilisée pour lier une propriété d’attribut d’un élément de vue. Prenons un scénario dans lequel nous devons fusionner certaines colonnes dans un tableau en utilisant un attribut colspan.
Si nous utilisons une variable de valeur comme indiqué dans le commentaire ou comme une liaison de propriété, cela entraînera une erreur. Ainsi, nous devons utiliser une liaison d’attribut avec débuter par attr et suivi d’un point et le nom de l’attribut.
4. Class Binding
La syntaxe de la liaison de classe est très similaire à la liaison d’attribut et cette méthode est utilisée pour définir une propriété de classe d’un élément de vue. Avec l’utilisation de cette méthode de liaison, nous pouvons ajouter des classes CSS de manière conditionnelle à un élément, créant ainsi des éléments stylisés de manière dynamique.
La propriété CSS rouge ne sera appliquée que lorsque les notes des élèves sont inférieures à 40. Comme similaire à la liaison d’attribut, la liaison de classe commence par le mot-clé class suivi d’un point et du nom de la classe.
5. Style Binding
Cette méthode est également très similaire aux deux méthodes précédentes et nous pouvons définir le Style Binding pour définir les styles css en ligne.
La liaison de données bidirectionnelle
La liaison de données bidirectionnelle consiste à établir une connexion bidirectionnelle entre la vue et le composant permettant aux utilisateurs d’échanger des données dans les deux sens. La liaison de données bidirectionnelle peut être facilement réalisée en utilisant (ngModel).
Veuillez vous assurer d’importer le FormsModule de @angular/forms dans le fichier app.component.ts si vous utilisez (ngModel).