IONIC Section 5 - 5.14 Explication debugging

Click here for more videos available on our youtube channel !

Hello everyone, following our debugging, we will see a little more in detail together what we have done. As can be seen in our application at the console level, when the recipe is clicked, "ionViewDidLeave" is well used, and when we exit or delete the recipe, "ionViewDidEnter" takes care of it. It is important to understand how the life cycle behaves and how it differs when we talk about a loaded page with the Angular router, and therefore indirectly controlled by Ionic. In classic Angular components we use them by embedding their selector in our models or loading them via routing, we have a certain life cycle, but we We also have a specific lifecycle for components that we loaded via routing. Call page Ionic, though these are ordinary Angular components, just components that we loaded through the Angular router and are therefore indirectly controlled by Ionic. So for classic Angular components, we have “ngOnInit”, just like “ngOnChanges” for example, but it's not very important here and if we go for example to a different page, we have "ngOnDestroy". Now this will be called when the component is essentially deleted when it's actually in that position. Now, For Ionic pages, because of this caching mechanism, we had new lifecycle methods. We got "ionViewWilleEnter" for example, and it will work after ngOnInit, we also got ionViewDidEnter which also works after that also after 'WillEnter'. Now the difference is that ionViewWillEnter basically runs just before the page content loads and displays on the screen. We can say that "ionViewDidEnter" will be called right after. Both are called each time a page becomes visible, which is important because with caching, if a page is still in cache and you can't see it just because another page is on top, on that page stack it will actually never be destroyed so that ngOnDestroy is never called either when you return to that page which is still on the page stack. "ionViewWillEnter" and "didEnter" will be called, as they are called each time the page becomes visible, so to speak, when it becomes the top of that stack of pages. And since "ngOnDestroy" is never called, but you may want to do some cleaning jobs, you also get "ionViewWillLeave" and "ionViewDidLeave". These are also called whenever the page becomes invisible and which can be called in places where "ngOnDestroy", is not called, which is the case if it is simply no longer the topmost page in the stack, but still on the stack. This video is coming to an end, I hope with these explanations you will have understood each role of our life cycle of our application, I'll give you an appointment for the next one.