Navigation In V1

Navigate Between A Single Page Concurrently Coupled To The URL Bar Modals Were 2nd Class Navigation Citizens Unable To Fully Control Navigation History Difficult To Deep Link

Navigation In V2

Ionic 2 Navigation Components

NavController

NavParams

NavPop

NavPush

Nav

NavBar

Nav

Navbar

NavController

NavController

@Component

FirstPage

SecondPage

FirstPage @Component

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import { Component } from '@angular/core' ; import { NavController } from 'ionic-angular' ; import { SecondPage } from '../second/second' ; @ Component({ selector : 'page-first' , templateUrl : 'first.html' }) export class FirstPage { constructor ( private navCtrl: NavController ) {} goToSecondPage(){ this .navCtrl.push(SecondPage); } }

SecondPage @Component

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import { Component } from '@angular/core' ; import { NavController } from 'ionic-angular' ; @ Component({ selector : 'page-second' , templateUrl : 'second.html' }) export class SecondPage { constructor ( private navCtrl: NavController ) {} goBackToPreviousPage(){ this .navCtrl.pop(); } }

push()

pop()

NavController push()

import { NavController } from 'ionic-angular' ; import { SecondPage } from '../second/second' ;

navCtrl

goToSecondPage()

constructor ( private navCtrl: NavController ) {} goToSecondPage(){ this .navCtrl.push(SecondPage); }

URL

this .navCtrl.pop();

NavParams

NavParams

FirstPage @Component

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import { Component } from '@angular/core' ; import { NavController } from 'ionic-angular' ; import { SecondPage } from '../second/second' ; @ Component({ selector : 'page-first' , templateUrl : 'first.html' }) export class FirstPage { constructor ( private navCtrl: NavController ) {} goToSecondPage(){ this .navCtrl.push(SecondPage, { firstParamName : 'firstParamValue' , secondParamName : 'secondParamvalue' }); } }

SecondPage @Component

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 import { Component } from '@angular/core' ; import { NavController, NavParams } from 'ionic-angular' ; @ Component({ selector : 'page-second' , templateUrl : 'second.html' }) export class SecondPage { private firstParam; private secondParam; private allParams; constructor ( private navCtrl: NavController , private navParams: NavParams ) { this .firstParam = this .navParams.get( 'firstParamName' ); this .firstParam = this .navParams.get( 'secondParamName' ); this .allParams = this .navParams.data; } goBackToPreviousPage(){ this .navCtrl.pop(); } }

this .navCtrl.push(SecondPage, { firstParamName : 'firstParamValue' , secondParamName : 'secondParamvalue' });

import { NavController, NavParams } from 'ionic-angular' ;

constructor ( private navCtrl: NavController , private navParams: NavParams ) { this .firstParam = this .navParams.get( 'firstParamName' ); this .firstParam = this .navParams.get( 'secondParamName' ); this .allParams = this .navParams.data; }

data

this .allParams = this .navParams.data;

NavPush & NavPop

First Page @Component

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 import { Component } from '@angular/core' ; import { NavController } from 'ionic-angular' ; import { SecondPage } from '../second/second' ; @ Component({ selector : 'page-first' , templateUrl : 'first.html' }) export class FirstPage { public secondPage = SecondPage; public paramsForSecondPage = { firstParamName : 'firstParamValue' , secondParamName : 'secondParamvalue' }; constructor ( private navCtrl: NavController ) {} goToSecondPage(){ this .navCtrl.push(SecondPage, { firstParamName : 'firstParamValue' , secondParamName : 'secondParamvalue' }); } }

FirstPage HTML Template

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <ion -header > <ion -navbar > <ion -title > First Page < /ion-title> < /ion-navbar> < /ion-header> <ion -content padding > <button ion-button ( click )=" goToSecondPage ()" > Go To Second Page </button> <button ion-button [ navPush ]=" secondPage " > Go To Second Page </button> < /ion-content>

<button ion-button ( click )=" goToSecondPage ()" > Go To Second Page </button> <button ion-button [ navPush ]=" secondPage " [ navParams ]=" paramsForSecondPage " > Go To Second Page </button>

secondPage

[navParams]

"paramsForSecondPage"

public secondPage = SecondPage; public paramsForSecondPage = { firstParamName : 'firstParamValue' , secondParamName : 'secondParamvalue' };

"secondPage"

NavPop

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <ion -header > <ion -navbar > <ion -title > Second Page < /ion-title> < /ion-navbar> < /ion-header> <ion -content padding > <button ion-button ( click )=" goBackToPreviousPage ()" > Go Back To Previous Page </button> <button ion-button navPop > Go Back To Previous Page </button> < /ion-content>

Advice On NavPush & NavPop

As a rule of thumb I always advise that you use the [navPush] & navPop feature for your navigation especially the navPop for simple navigation actions. This is because the navPop & [navPush] make your code more declarative and save you lines of code in many cases. You should only use the NavController method when you need to access the navigation mechanism by code or need to perform some internal actions before of after a specific navigation action is executed.

Roundup

Navigation is one the key areas that Ionic significantly improved on for Ionic 2. In Ionic 2, we have a new shiny Navigation mechanism that has some powerful features which enable us to do some great things. In this post, we will first look at some of the difficulties the Navigation system in Ionic V1 had. We will then look at the new Navigation system available in Ionic V2 and learn to use these features.Ionic V1 had a navigation system based on the UI-Router in Angular 1x. This navigation system in Ionic 1x got the simple things done, but it was not powerful enough to enable us to do some more powerful things. Listed below are some of the shortcomings that were either impossible or difficult to achieve with the old navigation system.The navigation system in Ionic 2 is a completely rethought effort and custom routing effort. It is also not based on the current routeing system made available by Angular. I honestly believe in my opinion that it is a much simpler system in comparison to the routeing provided by Angular. It also gives us different Lifecycle events which you can learn about by reading IONIC BY COMPONENT: PAGE LIFECYCLE . Let's have a look at the different features of the navigation system in Ionic 2.We will only be covering the components in bold and would be leaving out thecomponents in this tutorial as they are part of a different scope. Now let's dive into each component and learn about what each lets us do.Thecontroller is a service that is used to navigate between pages. Each page in Ionic is an Angularand to navigate between a page all we need to do is have a reference to the Component we want to navigate to. Let's assume that we have a @Component called& another @Component calledThe code provided above shows how we can use the NavController to move from one page to another. The NavController has 2 functions,that let us navigate & go back between pages respectively.The push() function allows us to move between pages & can take 3 possible parameters. If we examine the code for our FirstPage @Component, we can see that the first thing we did on lineis to import our NavController and also import the @Component we want to navigate to which in this case is the SecondPage @Component.We then injected the NavController instance ason lineto make it available as a property within our @Component. Lineshows how we created a functionwithin which we call the NavController instance on lineand use its push() function. We pass the SecondPage @Component we imported on lineas a parameter. The piece of code on linetells the NavController to navigate to the @Component passed, and it's as simple as that to navigate between pages in Ionic.No extra setup required and also nopath to be passed as well. All we need to know is the @Component we want to go to, and this can also be the very same @Component we are in which means we can pass FirstPage @Component if we wished, and the navigation would still work flawlessly. We can also take a look at the SecondPage @Component code and have a closer look at the code on lineWe can see a pop() function that the NavController exposes. This pop() function does the opposite of the push() function but it doesn't require a @Component instance to be passed. All this code will simply do is go back to the previous page and the greatest thing about it is that we do not need to know what @Component the previous page is as the NavController has all that details and will remove our current Page from the stack and take us back automatically. You can read more about the the NavController on the NavController Ionic Docs Page Majority of the times you navigate, you would ideally want to be able to pass parameters. This is also very simple to do with the new navigation system. Ionic provides theservice which enables us to obtain passed parameters. Let us modify our sample from the previous examples with the FirstPage & SecondPage @Components and see what navigating with parameters looks like.Let's start by having a look at linesof our new code for the FirstPage @Component. We can see that we passed a second parameter, which is a key/value object. This object is what we use to specify parameters we want to pass to the next @Component we are navigating to.In our SecondPage @Component, we first import the NavParams service into our project.We then ensure that we have the NavParams injected in our constructor and then retrieve the parameters available to us. These can be seen between linesIt helps to know the name of the parameters available to us as this would normally be the case. There will also be cases like this one where we pass multiple parameters and want to retrieve all of them at once. Lineshow just how we can achieve this very feat via theproperty that the NavParams service has.This data property allows us to retrieve all parameters available. It's totally up to you to decide which method you prefer to use when retrieving parameters as both work very well. NavParams Official Docs Page The NavPush & NavPop are used to declaratively implement the NavController's push() & pop() functions. This means you can navigate from your HTML templates directly. The NavPush & NavPop might seem like a duplicate feature but they are actually a pretty smart set of features. So far from previous code in this post, we have had to create a function that calls our navigation code. However, with the NavPush & NavPop, we can bind to any HTML element of our choosing and just pass the necessary parameters needed. To showcase this feature, we will be using the templates of our FirstPage & SecondPage @Components.If you pay close attention to the HTML template of FirstPage, you will see that on linewe have 2 button components that you will see both the NavController & NavPush implementations for navigating to the SecondPage @Component. Lineon the FirstPage HTML template shows how we used the goToSecondPage() function we created on lineof the FirstPage @Component code.You can also see that the [navPush] is a property being bound and it is being passed a parameter. We will also see that another propertytakes in a parameterFrom the @Component code for the FirstPage HTML, we can see that theparameter we bind to the [navPush] property and the "paramsForSecondPage" parameter we bind to the [navParam] properly are provided in on linesof the FirstPage @Component code. The "secondPage" parameter is actually a reference to the SecondPage @Component , while the "paramsForSecondPage" is a reference to an object which we are using as navigation parameters. You can see how similar this method is a bit more declarative than the NavController method.The NavPop is the opposite of the NavPush and is used to navigate back to the previous page.Linesshow how we navigate back both with the NavController method and the navPop method. The navPop method on lineshows how we didn't need to use a created function and bind directly to any HTML element. NavPush Official Docs Page As seen in this post the new navigation mechanism is very mature and allows us to do a lot of new things in Ionic. Be sure to read IONIC BY COMPONENT: PAGE LIFECYCLE which details the lifecycle event of the Ionic of an Ionic Page. Stay tuned for more posts in this series and be sure to share this post if you enjoyed. Also feel free to talk about or ask about anything in the comments section below.