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

Suite à la création de nos boutons, nous allons nous rendre sur notre page “home.page.ts”, où nous allons créer un component qui va s’appeler “isOpen” de type boolean, qui sera égal à false que nous allons utiliser pour dynamiser nos boutons. Donc on va insérer un attribut “click” qui interagit lorsqu’on clique sur le bouton etde même pour le second. Voilà je mets la méthode « (click)=« isOpen = false». Je fais la même chose je copie et je colle pour le second bouton, voilà, et à l’inverse je vais aller mettre « true», donc voilà le résultat. Maintenant, dans notre ion-content, ligne 13, nous allons créer une div qui portera la class “empty”, et on va y ajouter du texte en small en indiquant “Vous n’avez pas de tâches”. Et donc, dans notre page “.TS”, on va créer un deuxième component, qui va s‘appeler“task any”. Dans notre page HTML, dans notre ligne 17 de ion-list, nous allons insérer la méthode “*ngIf=”tasks.length” afin de parcourir le tableau. Egalement, dans notre footer ligne 30, notre component “isOpen”. Donc voilà, le résultat, cependant on voit une erreur, effectivement les méthodes ont été inversés entre les 2 boutons, pas de panique, on revient sur la page HTML, et on inverse le true et le false, comme cela. Et voilà, quand je clique sur “Ajouter” on peut saisir une tache et l’annuler lorsque je clique sur “Annuler”. Maintenant sur notre ion-input, ligne 32, où on va insérer un “ngon vModel=newTask”, comme ceci, afin de pouvoir saisir automatiquement la tâche souhaitée de façon dynamique. Donc on reprend la méthode “click” et on va créer une fonction « addNewTask()» et on va la créer aussi dans notre page “.TS”. Donc « addNewTask()» on oublie pas les parenthèses et à l’intérieur on va créer une variable task, voilà comme ceci. Et à l’intérieur on va créer le component qui va s’appeler«isChecked : false;» donc par défaut et également content : « this.newTask», qui va récupérer la valeur dans le champ, donc « this.newTask»par la suite on va faire un console.log de task pour voir un peu ce que ça donne. Donc on va regarder notre page et on va inspecter dans la console, voilà donc on va cliquer sur « ajouter» on va faire une nouvelle tâche, par exemple “faire la vaisselle”, on va ajouter en cliquant sur le bouton, et on voit bien qu’elle a bien été pris en compte de par notre component créer. Donc retour sur notre page HTML, ligne 21 concernant « ion-card», on va faire un “ngFor=”let task of tasks” et au « h4» on met le contenu de notre tâche saisie dans le champ pour une saisie dynamique. Donc on revient sur notre page “.TS” on va remplacer notre console.log par « this.newTask =;» et on va le push pour ajouter notre tâche dans le tableau des tâches. Donc « this.tasks.push(task)» On retourne sur la page HTML, on revient sur ma ligne 32 car effectivement j’ai mal saisi le code, pensez à bien vérifier l’insertion de vos brackets ou parenthèses. c’est très important de se relire pour éviter toute perte de temps. Donc on essaie d’insérer la tâche au bon endroit, voilà donc la modification a été faite et on va pouvoir regarder notre page. Donc la tâche à bien été répertoriée, c’est parfait et on peut ajouter notre « faire à manger» parfait. Et voilà, ce sera tout pour notre vidéo de projet, je vous retrouve tout de suite pour une prochaine vidéo, à bientôt.