Navigate Between Pages In An Ionic 2 Android And iOS App

In most scenarios, when developing a mobile application, you’re going to want multiple pages or screens for displaying information.  In Ionic Framework 1, you’d use the AngularJS UI-Router to navigate between pages, but things are different when it comes to Angular 2 and Ionic 2.  The UI-Router is not present in the latest version of Ionic Framework.

We’re going to take a look at navigating around an Ionic 2 application and see how easy it is.

Let’s start by creating a fresh Ionic 2 Android and iOS project.  This can be done by executing the following from your Terminal (Linux and Mac) or Command Prompt (Windows):

It is important to note that you cannot add and build for the iOS platform unless you are using a Mac computer.  Also, you must be using the Ionic CLI version that supports building Ionic 2 applications.

The blank Ionic 2 template only has one screen to start and it has nothing on it.  We’re going to create a second page and navigate to it.

We’ll start by creating our other application page.  Inside your project’s www/app directory, create a folder called other that contains an other.htmlother.js, and other.scss file.

For simplicity, the www/app/other/other.scss file should look like this:

We’re not going to worry about styling this page.

Next let’s move onto the UI for this other page.  Open your project’s www/app/other/other.html and add the following code:

As you can see, this page will display a first and last name.  We’ll get to that soon.

Finally let’s add the logic component to this page.  Open the www/app/other/other.js file and add the following:

The important thing to note here is the stuff dealing with NavParams.  The firstname and lastname variables that we display in the UI come from the NavParams which actually come from the parent page.  It is a way to pass values when navigating between pages.  You’ll see this in parent page now.

Open your project’s www/app/home/home.js file and change the code to the following:

A few things going on here.  First off, we are including the NavController which will allow us to play with the navigation stack.  Next we are defining this OtherPage class and specifying which file it is coming from.

Let’s jump into the navigate function.  When this function is called we are going to push the OtherPage class into the stack, while also including two NavParams, like we saw in the child page.  Anything you add to this object can be accessed in the child page.

Finally let’s look at the simple UI driving this.  Open your project’s www/app/home/home.html file and change it to the following:

Nothing fancy here.  Just a button that navigates deeper into the stack.

Conclusion

We don’t have the UI-Router like we had in Ionic Framework 1, but in Ionic 2 we don’t need it.  Navigation has become significantly easier in version two of the framework.  However, the way Ionic 2 navigates is not the same as how Angular 2 navigates.  If you’re interested, I wrote about how to navigate between routes in Angular 2 in a separate tutorial.

Nic Raboy

Nic is a skilled application developer who has released several native and hybrid mobile applications to iTunes and Google Play. He writes about his development experiences related to making web and mobile app development easier to understand and has experience in Android, Node.js, Apache Cordova, Java, NoSQL, SQL, GoLang, NativeScript, and Unity3D.

  • MarcosAguayo

    Thanks a lot. But when I refresh the page returns to the Home. Is it possible to not lose teh actual page? Thanks

    • Refresh the page? Are you trying to use a web browser? Don’t do that.

      • MarcosAguayo

        No, but when I upload a file or send a form the page refreshes automatically.

        • How are you uploading a file and submitting a form? It is possible you’re doing it wrong. Let me know.

  • Anil Kumar

    Hi Nic,
    In my folder structure am not able to see the app folder but I am able to see a build folder with ionic v2 project..
    and I installed CLI correctly from your post .
    my Ionic version is 2.0.0-beta.17.
    I have to install anything more to run or it is correct only

    Regards,
    Anil Kumar

    • So the directory structure changed slightly since when I wrote this tutorial. The code should remain accurate, just the file locations will be different.

  • How can one set navigate function globally? I want to put cog icon and put that on every page, but I dont want to keep creating navigate function again and again. can we do it from app.ts?

  • Erwin wienzzz

    Hello Nic, Ionic2 beginner here. I am trying to apply your code. However, I always get error unexpected token in constructor(Platform: platform …. part. Is it due to TypeScript usage? but From what I see you didn’t include –ts arguments upon creating ionic project. This kinda make me lost here. Oh and another question, your tutorial here suggest to create app under www/app directory, while other resource said that app folder is located under root. Is it because of different [email protected] version? Thanks

    • This is not a TypeScript app and it uses an older alpha version. I will update it once it hits release candidate. In the mean time, the differences should be minimal.

      Too much for me to keep up with making updates to alpha and beta things that change daily.

  • Fedor Usakov

    Thanks, great tutorial.
    But I have a question.
    Every time, while I’m trying to push a page my side menu is deprecated and replaced with a ‘back’ arrow.
    So I’m using setRoot instead. This solution is not perfect as page switch animation is missed. I could see how one page is brutally replaced by another without any animation.
    Is it possible to switch between pages and save menu hamburger-Icon?

    • Well it depends on how you add your pages to the view stack. If you add to the stack, it makes sense that a back icon appears so you can navigate back in the stack. If you replace the top of the stack instead of adding to it, the hamburger should remain.

  • is there any other way to navigate between pages using ROUTER_CONFIG handling routing in one array or we can say is as handling routing in .ts file if it is possible help us to do in ionic 2

    • I’m not sure what you’re asking. Are you asking if you can do it the Angular 2 way rather than the Ionic 2 way?

      • https://angular.io/docs/ts/latest/tutorial/toh-pt5.html in this link they have given something like router-outlet and routerConfig .. so on so how to

        so Instead of writing [navPush] or this.nav.push(‘ClassName’) on the current .ts file

        I would like to do all the navigation to be controlled in a single .ts file

  • Varshil Shah

    hey i want to go back to specific page .how could i do that?
    if u have any example of popTo() please share with me.

  • Ionic Facebook

    how to store facebook user login data wil be store inmysql database with ionic v2