67, Obafemi Awolowo way, Ikeja Lagos +234 802 302 0838 info@ionicdon.com

How To Navigate Between Pages In Ionic 2+ Application

In this tutorial, we are going to learn how to navigate from one page to another in an ionic 2+ application. The steps we are going to follow is as stated below:

  1. Create an ionic application
  2. Create new page in an ionic application
  3. Navigate from one page to another

 

Key assumption

It is assumed that you have setup your development environment, if you have not quickly do and if you don’t know how, check my earlier tutorial on getting started with ionic 2 before continuing with this tutorial.

 

Now let get started

  1.   Create an ionic application

This is a topic we have covered earlier in our tutorial series, please visit Create you first mobile app with ionic 2+ to learn how to create how to create application in ionic 2+.

For this application, let’s name it myDataApp, note that you can name it whatever you wish, hence to create our app, just type


Ionic start myDataApp blank

Follow the instruction as explained in the above-mentioned tutorial.




 

  1. Create new page in an ionic 2+

There are two ways to create a new page in ionic app

  1. Create it manually from your favorite code editor
  2. Use CLI (Command Line Interface) this second step is super easy, every files needed is created automatically for you, The CLI will generate the HTML, TypeScript, and SCSS files for your new page in a new directory under src/pages

 

Let’s name our second page “secondPage”

Type ionic g page secondPage

As shown in the diagram below

images

ionic g page

Now let’s check our code editor, in my own case I’m using Visual Studio Code it is awesome

Visual Studio Code




Now, open app.modules.ts under scr/app/ as shown below

app.module.ts

Do the following:

  1. Import SecondPage from its location
  2. Add SecondPage to declaration and entryComponents section

app.module.ts editing




 

3     Navigate from one page to another

Now let go back to our home.html

a.  Replace whatever is between<ion-content> </ion-content> with following code

<button ion-button round (click)=”goTosecondPage()”> NAVIGATE</button>

home.html

 

b.    Go to home.ts as shown below

home.ts

goToSecondPage(){

this.navCtrl.push(SecondPage);

}

home.ts editing




c.   Finally lets go to second.html

SecondPage

Add “ <h2> This is the Second Page </h2>” between <ion-content> </ion-content> as shown below

Hurray we are done

Test your application, you should have this

navigating from one page to another in ionic 2 application

This Post Has 3 Comments

Leave a Reply

Close Menu