Vous avez déjà découvert les types de liaison de données de base. 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 « Terminer » à « Annuler »), 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 task, qui stockera des informations sur la tâche, telles que son id, son title et son statut 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. Un opérateur ternaire peut être utilisé 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 changera : 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, décrite ci-dessus.

Liaison des événements aux boutons

Lions maintenant les événements aux boutons afin que les actions appropriées soient exécutées lors du clic sur les boutons. Nous avons deux boutons :

• Le bouton « Terminer » / « Annuler » — lorsqu'il est cliqué, il bascule l'état d'achèvement de la tâche ;

• Le bouton « Supprimer » — lorsqu'il est cliqué, il supprime la tâche.

Pour cela, nous allons créer 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() restera vide pour l'instant, car nous n'avons pas encore de liste de tâches pour supprimer des éléments ;

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

À présent, pour que ces méthodes fonctionnent lors du clic sur les boutons, il est nécessaire de les lier aux événements de clic des boutons. L’utilisation de la liaison d’événements avec l’événement click permet d’écouter les clics sur les boutons et d’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 modifie l’état task.completed. Cela modifie également le texte du bouton de « Terminer » à « Annuler » selon l’état de la tâche.

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

Le modèle de notre composant de tâche simple est désormais entièrement implémenté. Voici l’apparence du composant :

Le composant fournit les données, et le template assure la représentation visuelle. Ensemble, ils créent une interface de gestion des 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.