Lorsqu'un composant et son template interagissent, il est possible de transmettre des données et des événements entre eux de différentes manières. Ce processus est appelé liaison de données.

Dans Angular, il existe quatre types de liaisons de données, chacune ayant un objectif spécifique.

Examinons leur fonctionnement à l'aide d'un exemple simple de composant de tâche :

Ici, nous créons un objet task avec trois propriétés : id, title et completed. Ces propriétés décrivent une tâche spécifique—son nom et si elle a été accomplie.

Interpolation

Par exemple, si vous avez une variable comme task.title, vous pouvez l'entourer de {{ }}, et Angular affichera sa valeur dans le HTML.

Lorsque Angular traite le modèle, il trouve l'expression {{ task.title }} et la remplace par la valeur actuelle de task.title provenant du composant.

Si la valeur est 'Buy groceries', c'est exactement ce qui apparaîtra à l'intérieur de la balise <h3>. Le même processus s'applique à toutes les autres valeurs que vous interpoler.

Ainsi, l'interpolation est unidirectionnelle : les données circulent du composant vers le modèle, et l'utilisateur voit simplement le résultat.

Liaison de propriété

Parfois, il ne s'agit pas seulement d'afficher du texte — vous souhaitez contrôler le comportement d'un élément, comme désactiver un bouton, définir la source d'une image ou cocher une case.

Angular permet de lier des valeurs aux propriétés des éléments HTML à l'aide de crochets.

Imaginez que la tâche soit déjà terminée (task.completed = true). Dans ce cas, nous souhaitons que le bouton soit désactivé. Lorsque Angular voit [disabled]="task.completed", il prend la valeur du composant et la lie à la propriété disabled de l'élément DOM.

Si la valeur est true, le bouton devient désactivé. Si elle est false, le bouton reste actif.

Ceci est encore une liaison unidirectionnelle : les données circulent du composant vers le template, et le template s'ajuste en fonction de l'état actuel de l'objet task.

Liaison d'événements

Pour permettre à votre application de réagir aux actions de l'utilisateur (comme les clics), Angular propose la liaison d'événements. Lorsqu'un utilisateur interagit avec un élément, vous pouvez "intercepter" cet événement et appeler une méthode dans votre composant.

Ajoutons une méthode au composant :

Et mettez à jour le template :

Lorsque l'utilisateur clique sur le bouton, Angular détecte l'événement (click) et appelle la méthode toggleComplete() dans le composant. Cette méthode inverse la valeur de task.completed. Ensuite, Angular réaffiche le template et, grâce à l'interpolation ({{ task.completed ? 'Undo' : 'Complete' }}), le texte du bouton se met à jour instantanément.

Ici, les données circulent dans un seul sens : du template vers le composant (vous transmettez une action vers l'intérieur).

Liaison bidirectionnelle

Parfois, il est nécessaire que les modifications dans le modèle (comme la saisie dans un champ de texte) mettent immédiatement à jour le composant — et que les modifications dans le composant mettent immédiatement à jour le modèle. Angular facilite cela grâce à la liaison bidirectionnelle en utilisant [(ngModel)].

Important : Pour utiliser [(ngModel)], il faut importer le FormsModule — comme indiqué ci-dessous :

Et voici le modèle :

C'est ici que la magie de la liaison bidirectionnelle opère. Lorsqu'un utilisateur saisit du texte dans le champ de saisie, Angular met automatiquement à jour task.title dans le composant. Et lorsque task.title change dans le composant, Angular reflète immédiatement cette mise à jour dans le champ de saisie.

Contrairement aux autres types de liaison, la liaison bidirectionnelle maintient en permanence la synchronisation entre le composant et le template.

Principales différences

Chacune de ces méthodes de liaison possède ses propres caractéristiques et convient le mieux à différents scénarios d'interaction des données au sein d'une application.