Exemple simple de One Way & Two Way Binding en Angular 8
One Way Binding :
Dans ce, nous allons vous montrer comment nous pouvons lier les propriétés dans One Way binding qui est aussi connu comme Property Binding. Le One Way Binding lie la propriété du composant à la vue. Mais le problème ici est que si vous modifiez la valeur de la même propriété sur la page html, alors elle ne sera pas mise à jour au niveau du composant, la valeur du composant de cette propriété restera la même. Où nous pouvons utiliser le One way binding:
- Montrer les valeurs reçues de la base de données et chargées dans une propriété ou un Modèle déclaré au niveau du composant
txtName : string= « Test 1 »;
- Le résultat de tout calcul effectué dynamiquement au niveau du composant peut être mis à jour du côté de la vue en assignant simplement la dernière valeur à cette propriété au niveau du composant, comme indiqué ci-dessous:
this.txtName = « Test 2 »;
Comment utiliser le One way binding:
Approche 1 : Si vous montrez juste la valeur de la propriété dans <div> comme indiqué ci-dessous, alors utilisez la syntaxe suivante:
<div>Name is : {{txtName}}</div>
Approche 2 : Si vous utilisez une boîte de texte et que vous voulez montrer la valeur de cette propriété dans une boîte de texte, alors vous pouvez utiliser la syntaxe suivante pour y parvenir:
<input type= »text » = »txtName » />
Dans la syntaxe ci-dessus, nous avons seulement utilisé le crochet qui est une façon de réaliser une liaison de données à sens unique. Si vous ajoutez également un crochet rond avec le crochet, alors cela devient une liaison de données à deux voies.
La liaison à deux voies:
Dans ce cas, la valeur d’une propriété mise à jour à partir du composant se reflétera sur la vue et vice versa. Comme le montre l’exemple ci-dessous, le two way binding sera utilisé pour une propriété qui est mappée à un Text-box ou tout autre type de champ de saisie. De cette façon, toute modification de la valeur d’une Text-box sera automatiquement reflétée à tous les endroits où cette propriété est affichée ou utilisée.
<input type= »text » = »txtName » />
Comme le montre la syntaxe ci-dessus, nous devons enfermer ngModel entre crochets et entre crochets ronds à la fois. Cela rend le champ d’entrée de liaison de données bidirectionnelle Text-box ci-dessus.
Exemple simple d’une liaison de données unidirectionnelle et bidirectionnelle complète dans Angular 8:
Ci-après se trouve le fichier sample-data-binding.component.ts data:
Ci-après se trouve le fichier sample-data-binding.component.html data file:
Résultat du code ci-dessus est :
Selon l’exemple ci-dessus, lorsque nous chargeons cette page, donc au chargement, il montrera « Test 1 » comme valeur affichée sur tous les emplacements, lorsque nous modifions la valeur d’un premier Text-box, alors il modifiera juste la valeur du même Text-box, il ne mettra pas à jour les valeurs sur tous les emplacements parce que c’est un One-Way data binding, mais si vous modifiez le second Text-box qui est Two-Way data binding, alors il mettra à jour ce champ sur tous les emplacements sur la vue et sur le composant.