IONIC - 3.6 Réalisation d'une to do list (2)

Nous revenons sur notre page home.page.html. Dans la balise <ion-checkbox> à la ligne 22, nous allons insérer la méthode ionChange qui permet de savoir si la tâche a été cochée ou non. La syntaxe est (ionChange)="onCheck($event, i)" sans oublier les parenthèses. Juste en dessous, sur le <h4>, nous ajoutons une directive *ngIf="task.isChecked" pour afficher ou masquer le titre selon l'état. Sur la seconde balise, nous utilisons *ngIf="!task.isChecked" avec le point d'exclamation pour la condition inverse.

Méthode de suppression

À la ligne 27, l'icône reçoit la méthode (click)="deleteTask(i)" : lorsqu'on clique sur l'icône corbeille, la tâche correspondante sera supprimée. Pour rendre cela fonctionnel, nous créons dans home.page.ts les méthodes onCheck et deleteTask :

onCheck(event, i) {
  this.tasks[i].isChecked = event.detail.checked;
}

deleteTask(i) {
  this.tasks.splice(i, 1);
}

La méthode onCheck met à jour la propriété isChecked de la tâche concernée en lisant la valeur de l'événement (event.detail.checked). La méthode deleteTask utilise splice(i, 1) sur le tableau tasks pour retirer un élément à l'index donné. Faisons une petite démo : on saisit une tâche (« manger une tâche », par exemple), on l'ajoute, puis on clique sur la corbeille pour la supprimer : tout fonctionne !

Voilà, c'est terminé concernant ce projet de to-do list réalisée avec Ionic. Bravo, vous pouvez vous féliciter ! Quant à nous, nous nous retrouvons dans la prochaine vidéo pour poursuivre l'exploration d'Ionic. À bientôt !

En résumé

Cette leçon Ionic couvre la finalisation d'une application to-do list fonctionnelle. Vous apprendrez à implémenter la gestion de l'état des tâches (cocher/décocher), à créer une fonction de suppression de tâches via une icône interactif, et à utiliser la méthode splice() pour retirer les éléments du tableau. La leçon se conclut par une démonstration complète montrant l'ajout et la suppression de tâches en temps réel.

Points clés

• Utiliser la liaison d'événement (event binding) avec isChecked pour gérer l'état coché/décoché des tâches
• Implémenter un gestionnaire de clic (handleClick) sur l'icône de suppression pour déclencher la suppression
• Utiliser la méthode splice() pour retirer dynamiquement un élément du tableau des tâches
• Distinction entre les tâches complétées (cochées) et non complétées dans l'interface
• Intégration des éléments HTML (checkbox, icône de corbeille) avec la logique TypeScript
• Démonstration pratique du cycle complet : ajout, affichage, et suppression de tâches

Questions fréquentes

Comment vérifier si une tâche a été cochée dans Ionic ?

Utilisez la propriété isChecked avec le binding d'événement (event binding). Lorsque l'utilisateur coche la case, la méthode récupère l'état via event.target et met à jour l'état de la tâche en conséquence.

Comment supprimer une tâche en cliquant sur l'icône de corbeille ?

Créez une méthode handleClick() liée au clic de l'icône. À l'intérieur, utilisez this.tasks.splice() avec l'index de la tâche pour la retirer du tableau. Le paramètre splice(index, 1) supprime 1 élément à partir de cet index.

Quelle est la différence entre une tâche cochée et non cochée dans la to-do list ?

Une tâche cochée a la propriété isChecked à true, ce qui peut être utilisé pour appliquer des styles différents (barrer le texte, changer la couleur) ou filtrer l'affichage. Une tâche non cochée reste à false et s'affiche normalement.