IONIC Section 5 - 5.13 Debugging

Click here for more videos available on our youtube channel !

Hello everyone, in the previous video, we made a delete button, however we could see that when we click on it, this removes the page elements about the recipe, not the recipe itself. So we will try to understand and debug the problem in which we are faced. Here is our code, we are in the "recipes.page.ts" page, we find our "ngOnInit", which we will modify its content by “console.log('LOADED RECIPES'); and below it another "console.log(this.recipes); this is where we add the recipes and, our problem is that, as its name suggests, "onInit", is called initially. So that means that this starter page, the recipe page, was never deleted. To verify this, let's include the "onDestroy" interface, which we will implement in "export" and import. Then we will be able to add at the bottom of the page our ngOnDestroy() { console.log('ngOnDestroy'); }. We will also add above “ionViewDidEnter () { console.log('ionViewDidEnter'); } that we don't need to implement, and we will copy paste this function, to replace it with “ionViewWillEnter()”. We will also import the “ionWillLeave()” functionality as well as “ionWillDidLeave()” and unsurprisingly, the modified "console.log". So we have these important points related to the life cycle, it means that we now have places to load our data so that they are always loaded when this page becomes visible. For this we could use “ionViewWillEnter” or “DidEnter”. For example here in “ionViewWillEnter”, we set our recipes as we did before in our “ngOnInit” with “this.recipes = this.recipesService.getAllRecipes(); and in our ngOninit, we can modify “loader recipes” by “ngOnInit” because we no longer update any recipes. And now, if we save our progress and reload our app, we can try to delete our recipe, and lo and behold, the result, we deleted our recipe, which no longer displays in the home page of our application. Now, we can improve our functionality by using a pop-up to confirm the cancellation, if the user clicked by mistake. But before that, let's see a little more in detail the added features with some explanations in the next video.