Multi Page Navigation in an Ionic App

Published on Nov 19, 2017

•

5 min read

•

IONIC

Ionic makes it easy to create multiple 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:


ionic start -a 'Multi Page Navigation'
-i app.multipage.nav ionic-multi-page-nav blank

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 diving into our code base.


$ ionic g page page1
$ ionic g page page2

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:


1import { BrowserModule } from '@angular/platform-browser';
2import { ErrorHandler, NgModule } from '@angular/core';
3import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
4import { SplashScreen } from '@ionic-native/splash-screen';
5import { StatusBar } from '@ionic-native/status-bar';
6
7import { MyApp } from './app.component';
8import { HomePage } from '../pages/home/home';
9
10// new pages to be added in declarations and entryComponents
11import { Page1Page } from '../pages/page1/page1';
12import { Page2Page } from '../pages/page2/page2';
13
14@NgModule({
15  declarations: [MyApp, HomePage, Page1Page, Page2Page],
16  imports: [BrowserModule, IonicModule.forRoot(MyApp)],
17  bootstrap: [IonicApp],
18  entryComponents: [MyApp, HomePage, Page1Page, Page2Page],
19  providers: [
20    StatusBar,
21    SplashScreen,
22    { provide: ErrorHandler, useClass: IonicErrorHandler }
23  ]
24})
25export class AppModule {}

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.


1<ion-header>
2  <ion-navbar>
3    <ion-title>Ionic Multi Page App</ion-title>
4  </ion-navbar>
5</ion-header>
6
7<ion-content padding>
8  <ion-card>
9    <ion-card-header> Home Page </ion-card-header>
10    <ion-card-content>
11      <button ion-button (click)="goTo('page1')">Page1</button>
12      <button ion-button color="secondary" (click)="goTo('page2')">
13        Page2
14      </button>
15      <button ion-button color="light" (click)="back()">Back</button>
16    </ion-card-content>
17  </ion-card>
18</ion-content>

Let’s update home.ts as well.


1import { Component } from '@angular/core';
2import { NavController } from 'ionic-angular';
3
4import { Page1Page } from '../page1/page1';
5import { Page2Page } from '../page2/page2';
6
7@Component({
8  selector: 'page-home',
9  templateUrl: 'home.html'
10})
11export class HomePage {
12  constructor(public navCtrl: NavController) {}
13
14  goTo(page) {
15    if (page === 'page1') {
16      this.navCtrl.push(Page1Page);
17    } else if (page === 'page2') {
18      this.navCtrl.push(Page2Page);
19    }
20  }
21
22  back() {
23    if (this.navCtrl.length() >= 2) {
24      this.navCtrl.pop();
25    }
26  }
27}

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.


1<!--Page1-->
2<ion-header>
3  <ion-navbar>
4    <ion-title>Ionic Multi Page App</ion-title>
5  </ion-navbar>
6</ion-header>
7
8<ion-content padding>
9  <ion-card>
10    <ion-card-header> Page 1 </ion-card-header>
11    <ion-card-content>
12      <button ion-button color="secondary" (click)="goTo('page2')">
13        Page2
14      </button>
15      <button ion-button color="light" (click)="back()">Back</button>
16    </ion-card-content>
17  </ion-card>
18</ion-content>


1import { Component } from '@angular/core';
2import { IonicPage, NavController, NavParams } from 'ionic-angular';
3import { Page2Page } from '../page2/page2';
4
5@IonicPage()
6@Component({
7  selector: 'page-page1',
8  templateUrl: 'page1.html'
9})
10export class Page1Page {
11  constructor(public navCtrl: NavController, public navParams: NavParams) {}
12
13  goTo(page) {
14    if (page === 'page2') {
15      this.navCtrl.push(Page2Page);
16    }
17  }
18
19  back() {
20    if (this.navCtrl.length() >= 2) {
21      this.navCtrl.pop();
22    }
23  }
24
25  ionViewDidLoad() {
26    console.log('ionViewDidLoad Page1Page');
27  }
28}

Similar for the Page2:


1<ion-header>
2  <ion-navbar>
3    <ion-title>Ionic Multi Page App</ion-title>
4  </ion-navbar>
5</ion-header>
6
7<ion-content padding>
8  <ion-card>
9    <ion-card-header> Page 2 </ion-card-header>
10    <ion-card-content>
11      <button ion-button (click)="goTo('page1')">Page1</button>
12      <button ion-button color="light" (click)="back()">Back</button>
13    </ion-card-content>
14  </ion-card>
15</ion-content>


1import { Component } from '@angular/core';
2import { IonicPage, NavController, NavParams } from 'ionic-angular';
3import { Page1Page } from '../page1/page1';
4
5@IonicPage()
6@Component({
7  selector: 'page-page2',
8  templateUrl: 'page2.html'
9})
10export class Page2Page {
11  constructor(public navCtrl: NavController, public navParams: NavParams) {}
12
13  goTo(page) {
14    if (page === 'page1') {
15      this.navCtrl.push(Page1Page);
16    }
17  }
18
19  back() {
20    if (this.navCtrl.length() >= 2) {
21      this.navCtrl.pop();
22    }
23  }
24
25  ionViewDidLoad() {
26    console.log('ionViewDidLoad Page2Page');
27  }
28}

Running the App

🔗

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


$ ionic serve

# OR

$ ionic serve --lab

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

Originally Published at Hackernoon.com

Share this article on X (Twitter)

Browse all posts

⬅️ Previous: Tips for Creating Nodejs REST APIs

Next: Using Google Fonts in an Ionic Application ➡️

Aman Mittal author

Buy me coffee

GitHub

X (Twitter)

I'm a software developer and a technical writer. On this blog, I write about my learnings in software development and technical writing.

Currently, working maintaining docs at 𝝠 Expo. Read more about me on the About page.