IONIC Section 5 - 5.12 Suppression d'une recette

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Bonjour à tous, si on récapitule, nous avons ajouté un service, nous avons ajouté un routage de base, nous avons donc ajouté la gestion d’état et la navigation, des fonctionnalités importantes pour utiliser Angular. Nous disposons bien sûr de toutes les autres fonctionnalités intéressantes permettant d’utiliser « ngFor » au lieu d’écrire notre propre logique JavaScript pour ajouter des éléments dynamiques dans le DOM et cela nous démontre l’utilité d’Angular avec Ionic. Maintenant il est particulièrement intéressant de voir que cela fonctionne avec Angular lorsque nous avons besoin de fonctionnalités supplémentaires comme ce controller d’alertes, donc juste après notre «ion-grid», on saisit « ion-alert-controller », même si Angular ne reconnaît pas ce controller d’alerte, le package d’Ionic ne l’englobe pas dans un component Angular, comme c’est le cas pour tous les autres components. La raison en est que nous utilisons maintenant ce controller d’alerte différemment, plus facilement. Pour vous montrer comment l’utiliser, modifions un peu notre application et assurons-nous que nous pouvons supprimer une recette dans notre application. Pour cela, dans notre toolbar, en dessous de notre title, nous allons saisir un « ion-buttons », avec un « slot=« primary » » et en dessous on va saisir un « ion-button » à l'intérieur on saisit un « ion-icon », si on recherche dans la documentation, on peut choisir celle qui nous correspond, donc je prends celle-ci par exemple, qui fera l’affaire, «ion-icon name="trash-outline" slot=« icon-only» qui permet de donner une sorte de fente au design de notre bouton. Et si nous sauvegardons notre progression et que nous retournons dans notre application, si on clique sur une recette, on peut apercevoir notre icône en haut à droite. Maintenant on souhaite que lorsqu’on clique sur cette icône, la recette soit supprimée. Pour se faire, dans notre fichier service, nous pouvons ajouter notre méthode qui nous permettra de faire cette action. Ce qui nous donne : « deleteRecipe(recipeId: string) { this.recipes = this.recipes.filter(recipe => { return recipe.id !== recipeId }); } ». Donc nous ajoutons une méthode de suppression de recette et nous avons besoin du « recipeId » de la recette qui devra être supprimé. Et puis on va déclarer une variable dans laquelle nous allons filtrer nos recettes qui exécutera une fonction sur chaque éléments du tableau des recettes et si cette fonction retourne true, elle conservera cet élément sinon se sera l’inverse. Tout en vérifiant que ce ne soit pas égal pour chacun de nos éléments. Maintenant, nous pouvons retourner sur notre fichier « recipe-detail.page.html », dans notre « ion-button », pour insérer la méthode «(click) =«onDeleteRecipe() » ». Et pour que cela fonctionne, ajoutons cette méthode dans notre fichier « recipe-detail.page.ts » ou on va créer notre fonction « onDeleteRecipe() { this.recipesService.deleteRecipe(this.loadedRecipe.id); ». Maintenant que la suppression est terminée, on souhaite quitter cette page car les données de cette page auront disparu, et par conséquent, on va injecter le router : « private router: Router» ainsi que son import. Et dans notre fonction, on ajoute « this.router.navigate([‘/recipes’]); », car après avoir supprimé, on va appeler ce router en allant dans nos recettes. Maintenant, on va tester la suppression, on clique sur une recette, on essaie de la supprimer, et on peut s’apercevoir que cela ne fonctionne pas. En effet, le contenu de la page concernant les détails est supprimé mais pas la recette en elle même. Et c’est ce que nous allons essayer de comprendre et de résoudre dans la prochaine vidéo.