Forward-/Backward navigation with Ionic 3

Published: January 06, 2018  •  ionic3, javascript

Ionic 3 has a built in navigation system that is based on a stack of cards. When the user navigates forward, Ionic 3 pushes a page on top of the other and when the user goes back, Ionic 3 pops the topmost page and the previous page appears.
The navigation system is accompanied with life cycle methods that Ionic calls at specific times in the navigation workflow. In addition, you can use the Angular lifecycle hooks ngOnInit and ngOnDestroy in your application.

The following demo application shows you all lifecycle methods and in what order the Ionic framework calls them. The app consists of two pages (HomePage and DetailPage).

HomePage DetailPage

Open HomePage

Open HomePage

When the app opens the HomePage first the constructor of the page class is called. After that Ionic calls the guard methods ionViewCanEnter and ionViewCanLeave. Both guard method return either a boolean or a Promise. Ionic cancels the navigation when either one of them returns false. This can be used for checking permissions or if the user entered all information in a form. After that the Angular hook ngOnInit is called and then the three Ionic methods.

Navigating to the next page can be done either programmatically with the NavController.push() method

this.navCtrl.push(this.detailPage, 'from push')

or in a declarative way with the navPush and navParms directives in the html template

<button ion-button full [navPush]="detailPage" [navParams]="'from navPush'">

The second parameter of the push method and the value of navParams specify arbitrary data that is sent to the next page and can be read with NavParams.get or NavParams.data


Navigate to DetailPage

When we navigate to the DetailPage these methods are called.

Navigate to DetailPage

The workflow is very similar to the initial navigation to the HomePage: Constructor, guard methods, Angular and Ionic lifecycle methods. In addition, Ionic calls ionViewWillLeave and ionViewDidLeave methods from the HomePage.


Navigate back to the HomePage

Going back from the DetailPage to the HomePage is either done with the Back button in the header. Ionic automatically adds this gui element and handles the event. The app can also do this programmatically with NavController.pop()

The lifecycle methods are called in this order.

Navigate back to the HomePage

Note that going backward to the HomePage destroys the DetailPage.
Destroying a page triggers calls to ionViewWillUnload and ngOnDestroy. You also see that the HomePage stayed in memory while the DetailPage was active (there is no call to the constructor).

You find the complete source code for this project on GitHub: https://github.com/ralscha/blog/tree/master/forwardbackward

See this blog post from Ionic and the official documentation for more detailed information about the lifecycle methods.


Differentiate between forward and backward navigation

Let's say we have an application like the previous one with two pages. The first page shows a list of items and the second page displays the item detail. To display the list the page makes a http call in the ionViewWillEnter method. The problem is that this method is also called when we navigate from the detail page back to the list and each time the application sends a http request to the server.

If you want to prevent that call from running each time you can move the code from the ionViewWillEnter method to either the constructor or ngOnInit or ionViewDidLoad method. These three methods are only called once when Ionic creates the page.

If you can't move the code and it needs to be in the ionViewWillEnter method you can solve this with a navigation parameter.

In the ionViewWillLeave method of the detail page we can access the previous page with NavController.getPrevious() and through that are able to set a navigation parameter.
In this example we name the parameter fromDetail.

ionViewWillLeave() {
 this.navCtrl.getPrevious().data.fromDetail = true;
}

Then in the ionViewWillEnter of the list page we can check for this parameter.

ionViewWillEnter() {
 const fromDetail = this.navParams.get('fromDetail');
 if (!fromDetail) {
    //send http request 
 } 
}

This way the code knows if the user opened the page from another menu/tab or he comes back from the detail page and can act accordingly.