Syntaxe de liaison (Binding)

La liaison de données est un mécanisme permettant de coordonner ce que les utilisateurs voient, avec les valeurs de données d'application. Bien que vous puissiez insérer des valeurs dans HTML et en extraire des valeurs, l'application est plus facile à écrire, à lire et à gérer si vous passez ces tâches dans un cadre contraignant. Vous déclarez simplement les liaisons entre les sources de liaison et les éléments HTML cibles et laissez le framework effectuer le travail. Angular fournit de nombreux types de liaison de données.

Les types de liaison peuvent être regroupés en trois catégories en fonction de la direction du flux de données :

• Unidirectionnel : de la source à la vue
• Unidirectionnel : de la vue à la source
• Bidirectionnelle : de la vue à la source

Data direction	Syntaxe	Type
Unidirectionnel de la source de données à la cible	{{expression}} [target]="expression" bind-target="expression"	Style de classe d'attribut de propriété d'interpolation
Unidirectionnel de la cible d'affichage à la source de données	(target)="statement" on-target="statement"	un événement
Bi-directionnel	[(target)]="expression" bindon-target="expression"	Bi-directionnel

Les types de liaison autres que l'interpolation ont un nom de cible à la gauche du signe égal, soit entouré par ([], ()) ou précédé d'un préfixe ( bind-, on-, bindon- ).

Un nouveau modèle mental

Avec toute la puissance de la liaison de données et la possibilité d'étendre le vocabulaire HTML avec du balisage personnalisé, il est tentant de penser au modèle HTML en tant que HTML Plus.

Mais il est également très différent du code HTML auquel vous êtes habitué. Cela nécessite un nouveau modèle mental.

Dans le cours normal du développement HTML, vous créez une structure visuelle avec des éléments HTML et vous modifiez ces éléments en définissant des attributs d'élément avec des constantes de chaîne.

src / app / app.component.html

Vous créez toujours une structure et initialisez les valeurs d'attribut de cette manière dans les modèles Angular.

Vous apprendrez ensuite à créer de nouveaux éléments avec des composants qui encapsulent le code HTML et à les déposer dans des modèles comme s'il s'agissait d'éléments HTML natifs.

src / app / app.component.html

Ensuite, vous en apprendrez plus sur la liaison de données. La première liaison que vous rencontrerez pourrait ressembler à ceci:

src / app / app.component.html

Une fois que vous avez démarré la liaison de données, vous ne travaillez plus avec les attributs HTML. Vous ne définissez pas d'attributs. Vous définissez les propriétés des éléments, composants et directives DOM.

Attribut HTML vs propriété DOM

La distinction entre un attribut HTML et une propriété DOM est cruciale pour comprendre le fonctionnement de la liaison Angular. Les attributs sont définis par HTML. Les propriétés sont définies par le DOM (Document Object Model).

• Quelques attributs HTML ont un mappage 1: 1 sur les propriétés. id est un exemple.
• Certains attributs HTML n'ont pas de propriétés correspondantes. colspan est un exemple.
• Certaines propriétés du DOM n'ont pas d'attribut correspondant. textContent est un exemple.
• De nombreux attributs HTML semblent correspondre à des propriétés mais pas de la façon dont vous pourriez le penser !

Cette dernière catégorie est source de confusion jusqu'à ce que vous compreniez cette règle générale : Les attributs initialisent les propriétés DOM puis sont terminés. Les valeurs de propriété peuvent changer. les valeurs d'attribut ne peuvent pas.

Par exemple, lorsque le navigateur effectue le rendu ‹input type="text" value="Bob"›, il crée un noeud DOM correspondant avec une propriété value initialisée à "Bob".

Lorsque l'utilisateur entre "Sally" dans la zone de saisie, la propriété value de l'élément DOM devient "Sally". Mais l'attribut value HTML reste inchangé lorsque vous interrogez l'élément d'entrée sur cet attribut : input.getAttribute('value') renvoie "Bob".

L'attribut HTML value spécifie la valeur initiale, la propriété value dans le DOM est la valeur actuelle.

L'attribut disabled est un autre exemple particulier. La propriété disabled d'un bouton est false par défaut, donc le bouton est activé.

Ajouter et supprimer l'attribut disabled "désactive" et "active" le bouton. La valeur de l'attribut n'est pas pertinente, c'est pourquoi vous ne pouvez pas activer un bouton en écrivant ‹button disabled="false"›Still Disabled‹/button›.

Définir la propriété disabled du bouton (par exemple, avec une liaison Angular) désactive ou active le bouton. La valeur de la propriété est importante.

L'attribut HTML et la propriété DOM ne sont pas la même chose, même s'ils portent le même nom.

Ce fait mérite d'être répété : la liaison de modèle fonctionne avec des propriétés et des événements, et non des attributs.

Dans le monde Angular, le seul rôle des attributs est d'initialiser l'état de l'élément et de la directive. Lorsque vous écrivez une liaison de données, vous traitez exclusivement avec les propriétés et les événements de l'objet cible. Les attributs HTML disparaissent.

Objectifs contraignants

La cible d'une liaison de données est quelque chose dans le DOM. Selon le type de liaison, la cible peut être une propriété (élément | composant | directive), un événement (élément | composant | directive) ou (rarement) un nom d'attribut, le tableau suivant résume cela :

Type	Cible	Exemples
Propriété	Propriété Element Propriété Component Propriété Directive
Un événement	Evénement d'élément Evénement de composant Evénement de directive
Bi-directionnel	événement et propriété
Attribut	Attribut (l'exception)
Classe	class propriété
Style	style propriété