Ionic Page LifeCycle Events

As we know Ionic pages are nothing but internally it is converted into an Angular component only as we all know Ionic frame is built on the top of Angular. And just like Angular Framework has its lifecycle hooks which we follow during the development of Web Application, Similarly, we have some interesting lifecycle events for ionic framework too which can capture and perform some specific task on a page during its lifecycle.

So In this blog, we are going to see how the page life cycle works in an app built with Ionic and Angular.

The Angular framework provides 2 the most important and commonly used lifecycle events to an ionic framework which we can leverage throughout the life of an application.

1: ngOnit(): This lifecycle event will be fired once after the component initialization. The basic use of this event is the initialization of local variables or if we want to execute any method from the service to get the data from backend to be displayed on UI.

2: ngOnDestroy(): This lifecycle event is also provided by Angular, which is fired immediately before the Angular destroy the view. So all the kinds of stuff like cleanups or unsubscribing from the observables will be done in this event.

So till here, we have discussed the main lifecycle hook events of Angular provided to Ionic and Now, we will be dive into the lifecycle of events of Ionic framework one by one.

1: ionViewWillEnter: In this event, everything is gonna is done behind the scenes, so this event is fired when component routing to is about to animate into view. i.e ionViewWillEnter() lifecycle function signifies that all that process to make your page in full view and transitioned in is about to begin and your page has been queued to be pushed into view.

2: ionViewDidEnter: When this event is fired, your page is completely loaded and completely available or entered into the view alongside the animation. In other words, this event is fired when the component routing to have finished.

3: ionViewWillLeave: This event is fired when your page triggered this lifecycle event in which page gets the information of getting out from the active state of the page but, it is still in the active state only. we can say that this event is Fired when the component routing from is about to animate. This kind of event is useful to start preparing for the things for the next view before navigating to the other view.

4: ionViewDidLeave: This event is fired when the component routing to has finished animating. Now, this event indicated that your ionic page is no longer in focus and leave the active state of the page. Also, this event can only be fired after the ionViewDidEnter event. this kind of events is basically fired to free up the memory resources.

So till now, we have discussed the most important and commonly used lifecycle events of ionic other than this we also have some more lifecycle events which would prevent unauthorized access of the user those events are:

• ionViewcanEnter which is  Fired before entering into a view, allows you to control whether the view can be accessed or not.
• ionViewCanLeave which is fired before leaving a view, allows you to control whether the view can be left or not.
  

But in Ionic4 the above mention two events (ionViewCanEnter and ionViewCanLeave) are replaced with the Routing Guards. for more information about the routing guards visit the official website.

Conclusions: I hope you will be able to understand the basic lifecycle hooks of the Ionic framework and will start implementing it in your application for leveraging the power of these lifecycle events phases and make your app faster and reliable.

Thanks for reading!!!