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
.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
Setup Home Page for Basic Navigation
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 as well.
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
Similar for the
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