Ionic 2 eases the navigation from one page to another page. And even you can send the parameter from one page to another page using the NavController class.

The navigation in Ionic 2 is very easy when compared to the navigation in the Ionic 1 framework.

To navigate from one page to another page, you need the NavController class. The NavController class had push() method. To navigate to another page, you have to pass the another page class name as a parameter to the push() method. That's all. The navigation from one page to another page is done.

Let's see, how to navigate from one page to another page using Ionic2 NavController class.

Create a new Ionic 2 project using.

ionic start routing balnk --v2

The HomePage class has been created by default. If you want to navigate to another page, you must create a new page. The creation of new page can be done by the Ionic 2 CLI(command line interface). To create a new page.

#Syntax

ionic g page page_name

#Example

ionic g page contact

The above command will create a new folder and corresponding files such as HTML, ts and SCSS file. We don't need the contact.module.ts file to work with Ionic 2 framework. So remove the contact.module.ts file.

Now import the newly created page to app.module.ts file

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

Whenever you create a new page you must import that page to the app.modul.ts file and include it in the declarations and entryComponents section.

@NgModule({
declarations: [
MyApp,
HomePage,Contact
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
HttpModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,Contact
]

If you are not mentioning the newly created page on the declarations of app.module.ts file, then Ionic 2 will display an empty preview in the browser.

And if you are not mentioning the newly created page on the entryComponents of app.module.ts file, then Ionic 2 will throw a "no component factory found" error along with the page name.

Now create a button with click event on the home.html file

<button ion-button color="danger" (click)="nextPage()" > Conatc Page </button>

Then import the NavCotroller and the Contact class to the home.ts file.

import { NavController } from 'ionic-angular';
import {Contact} from '../contact/contact'

Now create a constructor with NavController class reference.

constructor(public nav:NavController)
{

}

Now create a function, which uses the push method to navigate to the contact page.

nextPage()
{
this.nav.push(Contact);
}

That's all. you are done. you can preview this using the browser.

By default, the Ionic 2 application will show you the back button, when you navigation from one page to another page. However, you can use the NavController class pop() method to go back.

this.nav.pop()

The full home.ts file source code.

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import {Contact} from '../contact/contact'
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})


export class HomePage {

constructor(public nav:NavController)
{

}

nextPage()
{
this.nav.push(Contact);
}
}

Below is the Ionic 2 information while writing this post.

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1

Tested with Mac OS Sierra.