Share the post

navigation lifecycle events nav guards

What is navigation life cycle events in ionic?

In many of you might be familiar with Native android activity life cycle events. So, you have the next question in your mind is what are navigation life cycle events in ionic?

Basically, Life Cycle simply means where is your page or activity birth from and what is the end of your page or activity. When the page called by the user at the user interface then one internal function of ionic is called. Internally JavaScript function calls a native function of the platform (Android / Ios) whatever it is installed on your project.

In Native android has different method for event handling  like onCreate(),onStart(),onResume(),onPause(),onStop(),onDestroy()

In hybrid mainly 8 default methods are there in which 6 related to navigation life cycle events & 2 related to nav guards.

The Life Cycle Events In Ionic is as follows :

  1. ionViewDidLoad(): When a view is stored in memory then only this method is called. Once any page is called then the system stored its data to cache. These functions not called twice if your page already in cache. On every page we need to do some initialization of variables, constant members then this function is the place where you initialize your data.
  2. ionViewWillEnter(): When the page is just before to enter into the page. This method is basically used to update your view. For example, if you want some table to be reset before loading the page on the user interface then this is the best method.
  3. ionViewDidEnter(): When the page is fully active / you can say that the user completely loads this page on his screen then this method calls. This method can be used when you want to show some counts to the user like the list data count then this is the method for you.
  4. ionViewWillLeave(): When the page is ready to leave the activeness then this method is called. This is the best method to do your unsubscribe() calls or events.
  5. ionViewDidLeave(): When the page has already left the activeness then this method is called.
  6. ionViewWillUnload(): When the page is completely destroyed then this method is called.

Nav Guards Method :

  1. ionViewCanEnter() : It’s getting fired before page loads & it check’s whether the page can be accessed or not.It’s return type is boolean means true / false.
  2. ionViewCanLeave() : It’s getting fired before page leaving.

I recommend to you that, you should implement all above method on your every single page and then do the R & D. Just navigate from one page to other to see that which method is calling :).

Leave a Comment