Multi Page Navigation in an Ionic App

Ionic makes it easy to create mutiple pages navigation using NavController as the genesis of navigation stack. In this little application, I will try to make the concept clear to you.

Generate Application and Pages

To start with, let’s create a new Ionic app for this showcase. Follow along with me. To get started, we have to scaffold a new project, my favorite one-to-go Ionic CLI command:

cd in to the new project created by the above Ionic CLI command and run ionic serve to see the blank template with just a homepage available. We will create two new pages in this application to showcase our motive.

To read about the basic Navigation in an Ionic app, see this.

Now, with the help of Ionic CLI, let’s generate two new pages before diviing into our code base.

I am naming the two new pages generic but you can name them anything you want. Just follow the convention when importing the modules. Inside the app/pages you can see, there are two new folders with the names we generated. Each have its own .ts, .html and .scss file, thus, completing a web component on which every Ionic and Angular apps are based on.

To proceed, we need to add both the pages in our app.module.ts:

Setup Home Page for Basic Navigation

As the app.module.ts is updated with our changes, the scope of the whole application can now access these two new pages. To implement the navigation between them, we have to first update our home.html with buttons that will navigate to a specific page and business logic behind those events in home.ts.

Let’s update home.ts as well.

The goTo() function will help us in navigating to the desired page and back button will bring us to the previous page in the navigation stack. This is important! I mentioned to the previous page, not the home page. If you are familiar with Ionic 1, this would how state will work.

Updating Page1 and Page2

To continue to develop our demo application, we need to update our Page1 and Page2 components.

Similar for the Page2:

Running the App

If we save all the files and again from the terminal run:

The output shown can be best described in these screenshots:

This is just a glimpse of how multi page navigation in Ionic might work that might help you to get started with development.

To get the full code, you can visit this Github Repository

Want to receive more articles like this one? Subscribe me here. Sometimes, I send “never seen before” content to my subscribers.

I am also on Twitter

Aman Mittal 🖖 (@amanhimself) | Twitter_The latest Tweets from Aman Mittal 🖖 (@amanhimself). #BookBlogger @ https://t.co/UQvyNf1OTC | Developer | #Nodejs |…_twitter.com