IONIC - 3.7 Réalisation d'une to do list (3)

Après la création de nos boutons, rendons-nous sur la page home.page.ts pour ajouter un attribut booléen isOpen, initialisé à false, qui servira à dynamiser nos boutons. Sur la page HTML, nous insérons sur chaque bouton un attribut (click) : (click)="isOpen = false" pour le bouton d'annulation et (click)="isOpen = true" pour le bouton d'ajout. Ainsi, l'état du formulaire d'ajout est contrôlé par cette propriété.

Affichage dynamique des tâches

Dans <ion-content> à la ligne 13, nous créons une <div> avec la classe empty contenant un <small> qui indique « Vous n'avez pas de tâche ». Dans home.page.ts, nous ajoutons une propriété tasks (tableau). À la ligne 17, sur <ion-list>, on insère *ngIf="tasks.length" pour n'afficher la liste que s'il y a des tâches. À la ligne 30, sur le footer, on utilise *ngIf="isOpen" pour n'afficher le formulaire d'ajout qu'au bon moment. Attention : on inverse au besoin les valeurs true/false sur les boutons pour bien obtenir le comportement souhaité.

Sur le <ion-input> à la ligne 32, on ajoute la liaison bidirectionnelle [(ngModel)]="newTask" afin de récupérer dynamiquement la saisie. Sur le bouton de validation, on attache la méthode (click)="addTask()". Dans home.page.ts, on crée la méthode :

tasks = [];
newTask = '';

addTask() {
  const task = {
    isChecked: false,
    content: this.newTask
  };
  this.tasks.push(task);
}

La méthode crée un objet task avec isChecked: false et content récupéré depuis newTask, puis l'ajoute au tableau via push. Côté HTML, à la ligne 21 sur <ion-card>, on insère *ngFor="let task of tasks", et dans le <h4> on affiche {{ task.content }} pour afficher le contenu saisi. Après vérification des accolades et parenthèses, le rendu confirme que la tâche est bien insérée dans la liste. Voilà pour cette partie, on se retrouve pour la suite !

En résumé

Cette leçon couvre l'implémentation d'une application To-Do List fonctionnelle dans Ionic en utilisant Angular. Vous apprendrez à gérer l'état avec un booléen (isOpen), à créer des boutons interactifs avec click, et à manipuler un tableau de tâches. La vidéo montre comment lier dynamiquement une liste affichée avec *ngFor, capturer une saisie utilisateur via un input avec [(ngModel)], et ajouter des éléments au tableau via une méthode.

Points clés

Utiliser une variable booléenne (isOpen) pour contrôler dynamiquement l'affichage des boutons et des zones du formulaire
Employer l'attribut (click) sur les boutons pour déclencher des actions et la directive *ngFor pour itérer sur un tableau de tâches
Lier un input HTML avec [(ngModel)] pour capturer la saisie utilisateur de façon dynamique et synchroniser avec la variable du composant
Créer une méthode dédiée (ex: tasks.push()) pour ajouter les nouvelles tâches au tableau et vérifier le bon fonctionnement via console.log
Structurer la liste avec ion-card et afficher le contenu de chaque tâche en itérant sur le tableau

Questions fréquentes

Comment afficher et masquer dynamiquement les boutons Ajouter et Annuler ?

Créez une variable booléenne isOpen = false dans le composant TypeScript, puis utilisez l'attribut (click) sur vos boutons pour basculer sa valeur : (click)="isOpen = !isOpen". Dans le HTML, utilisez *ngIf ou la classe mti avec isOpen pour contrôler l'affichage.

Comment capturer la valeur saisie par l'utilisateur dans l'input et l'ajouter à la liste ?

Utilisez [(ngModel)]="newTask" pour lier l'input à une variable du composant. Au clic du bouton Ajouter, appelez une méthode qui fait this.tasks.push(new Task()) ou this.tasks.push({content: this.newTask, checked: false}) pour ajouter dynamiquement la tâche au tableau.

Pourquoi les tâches ne s'affichent-elles pas après ajout ?

Assurez-vous que le tableau tasks est initialisé, que *ngFor parcourt correctement le bon tableau, et que vous utilisez bien la bonne syntaxe : *ngFor="let task of tasks". Vérifiez également la cible d'insertion (ion-card) et testez avec console.log() pour confirmer que la tâche a été ajoutée.