IONIC Section 5 - 5.12 Deleting a Recipe

Click here for more videos available on our youtube channel !

Hello everyone, if we recap, we added a service, we added a basic routing, so we added state management and navigation, important features for using Angular. Of course we have all the other nice features to use "ngFor" instead to write our own JavaScript logic to add dynamic elements in the DOM and this demonstrates the usefulness of Angular with Ionic. Now it's particularly interesting how this works with Angular when we we need additional functionality like this alert controller, so right after our “ion-grid” we enter "ion-alert-controller", even if Angular does not recognize this alert controller, Ionic's package does not include it in an Angular component, as is the case for all other components. The reason is that we are now using this alert controller differently, more easily. To show you how to use it, let's modify our application a bit and let's make sure we can delete a recipe in our application. For this, in our toolbar, below our title, we will enter an "ion-buttons", with a "slot="primary"" and below we will enter an "ion-button" inside we enter a "ion-icon", if we search in the documentation, we can choose the one that corresponds to us, so I take this one for example, which will the case, “ion-icon name="trash-outline" slot="icon-only" which allows to give a kind of slot to the design of our button. And if we save our progress and that we return to our application, if we click on a recipe, we can see our icon at the top right. Now we want that when we click on this icon, the recipe is deleted. To do this, in our service file, we can add our method that will allow us to perform this action. Which gives us : “deleteRecipe(recipeId: string) { this.recipes = this.recipes.filter(recipe => { return recipe.id !== recipeId }); }”. So we add a recipe deletion method and we need the "recipeId" of the recipe that will need to be deleted. And then we will declare a variable in which we will filter our recipes which will execute a function on each element of the recipe array and if this function returns true, it will keep this element otherwise it will be the opposite. While checking that it is not equal for each of our elements. Now we can go back to our “recipe-detail.page.html” file, in our “ion-button”, to insert the “(click) = “onDeleteRecipe()”” method. And for this to work, let's add this method in our "recipe-detail.page.ts" file where we will create our function “onDeleteRecipe() { this.recipesService.deleteRecipe(this.loadedRecipe.id); ". Now that the deletion is complete, we want to exit this page because the data of this page will have disappeared, and consequently, we will inject the router: “private router: Router” as well as its import. And in our function, we add “this.router.navigate(['/recipes']); », because after deleting, we will call this router by going to our recipes. Now, we are going to test the deletion, we click on a recipe, we try to delete it, and we can see that it does not work. Indeed, the content of the page concerning the details is deleted but not the recipe itself. And that's what we're gonna try to understand and solve in the next video.