Two-way binding ( [(...)] )

Vous souhaitez souvent afficher une propriété de données et mettre à jour cette propriété lorsque l'utilisateur apporte des modifications.

Du côté des éléments, il faut combiner la définition d'une propriété d'élément spécifique et l'écoute d'un événement de changement d'élément.

Angular propose à cet effet une syntaxe spéciale de liaison de données bidirectionnelle [(x)].
La syntaxe [(x)] combine les supports de propriété de liaison [x], avec les parenthèses de liaison de l'événement, (x).

La syntaxe [(x)] est facile à démontrer lorsque l'élément possède une propriété réglable x et un événement correspondant nommé xChange. Voici un SizerComponent qui correspond au modèle. Il a une propriété size de valeur et un événement sizeChange :

src / app / sizer.component.ts

L'initiale size est une valeur d'entrée d'une liaison de propriété. En cliquant sur les boutons, vous augmentez ou diminuez les contraintes size, dans les limites des valeurs minimales / maximales, puis soulève (émet) l'événement sizeChange avec la taille ajustée.

Voici un exemple dans lequel le AppComponent.fontSizePx est bidirectionnel lié à la SizerComponent :

src / app / app.component.html (bidirectionnel-1)

Le AppComponent.fontSizePx établit la valeur SizerComponent.size initiale. En cliquant sur les boutons, vous mettez à jour la liaison bidirectionnelle AppComponent.fontSizePx. La valeur AppComponent.fontSizePx révisée se répercute sur la liaison de style, ce qui rend le texte affiché plus grand ou plus petit.

La syntaxe de liaison bidirectionnelle est en réalité un simple plus syntaxique pour une liaison de propriété et une liaison d'événement.

src / app / app.component.html (deux voies 2)

La variable $event contient la charge utile de l'événement SizerComponent.sizeChange. Angular attribue la valeur $event au AppComponent.fontSizePx au moment oú l'utilisateur clique sur les boutons.

Il est clair que la syntaxe de liaison bidirectionnelle est très pratique par rapport à des liaisons de propriété et d'événement distinctes.

Il serait pratique d'utiliser une liaison bidirectionnelle avec des éléments de formulaire HTML tels que ‹input› et ‹select›. Cependant, aucun élément HTML natif ne suit le modèle de valeur et d'événement Change.

Heureusement, la directive Angular NgModel est un pont qui permet la liaison bidirectionnelle pour former des éléments.