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 mécanisme est appelé liaison de données.

En 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, un objet tâche est créé avec trois propriétés : id, title et completed. Ces propriétés décrivent une tâche spécifique : son nom et son état d’achèvement.

Interpolation

Par exemple, si vous disposez d'une variable telle que 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 à toute autre valeur interpolée.

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 — il est nécessaire de 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.

Encore une fois, il s'agit d'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 (une action est transmise vers l'intérieur).

Liaison bidirectionnelle

Parfois, il est nécessaire que les modifications dans le modèle (par exemple, la saisie dans un champ de texte) mettent immédiatement à jour le composant — et que les modifications du 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 illustré ci-dessous :

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 liaisons, la liaison bidirectionnelle maintient en permanence la synchronisation entre le composant et le modèle.

Différences clés

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.