Vous avez déjà découvert les types de base de liaison de données. Examinons maintenant comment ils sont appliqués en pratique lors de l'utilisation du TaskComponent.

Structure de la tâche

Notre composant de tâche affichera le titre de la tâche, ainsi que deux boutons : l'un pour changer le statut de la tâche (de "Complete" à "Undo"), et l'autre pour supprimer la tâche. Voici la structure HTML qui sera utilisée :

Les styles ont déjà été définis. Vous pouvez les consulter en passant au fichier style.css.

Implémentation du composant

Notre composant manipulera un objet tâche, qui stockera des informations sur la tâche, telles que son id, son title et son état completed. Nous définirons cet objet dans la classe du composant :

export class TaskComponent {
  task = { id: 1, title: 'Buy groceries', completed: false };
}

Nous pouvons afficher ces données dans le template HTML du composant.

Utilisation des données du composant dans le template

Pour afficher les données de l'objet task, il suffit de référencer directement ses propriétés dans le template. Par exemple, pour afficher le titre de la tâche :

<div class="task-title">{{ task.title }}</div>

Si la tâche est terminée, le texte du bouton doit changer. Nous pouvons utiliser un opérateur ternaire pour ajuster le texte du bouton en fonction de la valeur de task.completed.

<button class="complete">
  {{ task.completed ? 'Undo' : 'Complete' }}
</button>

Si task.completed est true, le texte du bouton affichera "Undo" ; sinon, il affichera "Complete". Ainsi, le texte du bouton s'adapte dynamiquement à l'état actuel de la task.

Ajout de classes dynamiques avec la liaison de propriétés

Ajout de la possibilité de modifier l'apparence de la tâche en fonction de son état. Utilisation de la liaison de propriétés pour appliquer conditionnellement une classe CSS :

<div class="task" [class.completed]="task.completed">

Cela signifie : si task.completed est true, la classe completed sera ajoutée à l’élément. Sinon, la classe ne sera pas appliquée.

Ainsi, lorsque la tâche est terminée, l’apparence visuelle sera modifiée : le texte sera barré, la couleur deviendra grise et l’arrière-plan sera gris clair. Tous ces styles sont définis dans la classe CSS .completed, présentée ci-dessus.

Liaison des événements aux boutons

Liaison des événements aux boutons afin que les actions appropriées soient exécutées lors du clic. Deux boutons sont présents :

• Le bouton « Terminer » / « Annuler » — au clic, bascule l’état d’achèvement de la tâche ;

• Le bouton « Supprimer » — au clic, supprime la tâche.

Pour cela, création de deux méthodes dans le TaskComponent :

deleteTask() {
  // Method to delete the task. We'll implement it later.
}

toggleTask() {
  // Toggles the value of task.completed.
  this.task.completed = !this.task.completed;
}

• La méthode deleteTask() reste vide pour l’instant, car aucune liste de tâches n’est encore disponible pour la suppression ;

• La méthode toggleTask() bascule simplement la valeur de task.completed. Si la tâche est marquée comme terminée (true), elle devient incomplète (false), et inversement.

À présent, pour que ces méthodes fonctionnent lors des clics sur les boutons, il est nécessaire de les lier aux événements de clic des boutons. Liaisons d'événements avec l'événement click pour écouter les clics sur les boutons et appeler les méthodes correspondantes.

Dans cet exemple, la liaison d'événements permet d'associer les actions de l'utilisateur aux méthodes du composant. Le bouton « Terminer » / « Annuler » appelle la méthode toggleTask(), qui bascule l'état task.completed. Cela modifie également le texte du bouton de « Terminer » à « Annuler » en fonction du statut de la tâche.

Le bouton « Supprimer » appelle la méthode deleteTask(), qui n'est pas encore implémentée, car la suppression de la tâche sera ajoutée ultérieurement.

Le modèle de notre composant de tâche simple est maintenant entièrement implémenté. Voici à quoi ressemble le composant :

Le composant fournit les données, et le template assure la représentation visuelle. Ensemble, ils créent une interface de tâches interactive et conviviale, où les données sont affichées, l'apparence évolue et les boutons s'adaptent à l'état de la tâche.