In this tutorial, you will learn, how to create a new Ionic page and how to navigate to other pages in Ionic3. You can navigate to another page in two different ways using the Ionic 3. They are.

1. Standard Navigation
2. Ionic lazy loading Navigation

First, create a new Ionic 3 project using.

ionic start myapp blank

Then get inside the Ionic project folder using.

cd myapp

How to create new Page in Ionic3?

you can create a new page in Ionic 3 using the below command in terminal.

ionic g page contact

If you are using Ionic 3, then the above command will create four different files. The extra one is module.ts file.

Standard Navigation

If you are going to navigate to another page using the previously used navigation approach, then you must include the ContactPage in the app.module.ts file.

import { ContactPage } from '../pages/contact/contact';

Then add the page name in the declarations and entryComponents list.

declarations: [
    MyApp,
    HomePage,ContactPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,ContactPage
  ]

If you are not doing this step, then it will throw an error while navigating to the contact page.

Then create a button with click event in the home.html file.

<button (click)="goContact()" ion-button>Contact </button>

Import the NavController into the home.ts file.

import { NavController } from 'ionic-angular';

Create a reference for the NavController in the constructor.

constructor(private navCtrl:NavController)
{

}

Then import the ContactPage into the home.ts file.

import { ContactPage } from '../contact/contact';

Now create a function to navigate to the contact page.

goContact()
{
  this.navCtrl.push(ContactPage);
}

 

Get full source code using

https://github.com/bharathirajatut/ionic3/tree/master/standardNavigation
Ionic lazy loading Navigation

It is a very simple approach. There is no need to import anything on the app.module.ts file and home.ts file. Just create a new page. Then pass the page name as a string in the NavController of the home.ts file.

goContact()
{
  this.navCtrl.push('ContactPage');
}

 

Get full source code using

https://github.com/bharathirajatut/ionic3/tree/master/lazyNavigation


This helps us to reduce the app loading time, especially when starting the app. We can do more with lazy loading. I will cover the lazy loading in another post.

Summary:

In this tutorial, you learned the latest lazy loading navigation approach in Ionic 3. Benefits of this approach is

1. There is no need to import and include pages to the app.module.ts file whenever you creating the new page.
2. It will reduce the app loading time.
3. There is no need to import the page when you want to navigate to another page.
4. It is less typing. Reduces the import statements.