Ionic 3 Navigation Tutorial

NavController in Ionic 3

NavController is the base class for navigation controller components like nav and tab. Navigation controllers are used to navigate pages in your app. Navigation controller is the array of pages. These pages are navigated throughout an app by pushing and popping pages.

By using <ion-nav> component we can create and initialize a new nav controller. <ion-nav> extends the NavController class. You will often see the below imported NavController by default and it also have to be injected into the constructor.
A reference to the NavController is created so that we can use it anywhere in the class

import {NavController} from ‘ionic-angular’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
constructor(public navCtrl: NavController) {
}

Pushing and Popping in Ionic 3

To push a page, it means to make it the current page. This uses the reference to the NavController. You will need to import at the top of the file to navigate.

import {NextPage} from ‘../next-page/next-page’;

this.navCtrl.push(NextPage);

Once you push a page, it will automatically have Back Button that will be added to nav bar.
Pop is to navigate back to the previous page.
We can manually use pop. In such cases you can use: –
this.navCtrl.pop();

Example to Push and Pop the pages

Go in the command prompt and create the blank template by using the below command.
ionic start navigation blank
The blank template has only one page, so you have to add some other pages. Inside your project folder use ionic g page to generate or to create new pages.
cd navigation
ionic g page about
ionic g page contact

Next we have to add these two pages in app.module.ts. Open src/app/app.module.ts file and the two pages in the declarations and to entry Components

import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { MyApp } from ‘./app.component’;
import { HomePage } from ‘../pages/home/home’;
import {AboutPage} from ‘../pages/about/about’;
import {ContactPage} from ‘../pages/contact/contact’;

@NgModule({
declarations: [
MyApp,
HomePage,
AboutPage,
ContactPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
AboutPage,
ContactPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Open the app/src/pages/home/home.ts file and import the two pages component and add two methods, About() and Contact().

import {AboutPage} from ‘../about/about’;
import {ContactPage} from ‘../contact/contact’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
public Contact()
{
this.navCtrl.push(ContactPage);
}
}
public About()
{
this.navCtrl.push(AboutPage);
}

Now we have to create two buttons in the home.html and bind the two methods to two buttons. Open src/pages/home/home.html and add

<button ion-button (click)=”About()”>Go to About</button>
<button ion-button (click)=”Contact()”> Go to Contact </button>

Add back button to about and contact pages. Open the src/pages/about/about.ts file and add a back() method

back()
{
this.navCtrl.pop();
}

Add button to about.html

<button ion-button (click)=”back()”> Go Back</button>

Add back() method to src/pages/contact/contact.ts file

back()
{
this.navCtrl.pop();
}

Add button to contact.html

<button ion-button (click)=”back()”> Go Back </button>

Using NavParams in Ionic 3

This is used to pass parameters from one page to another. We can pass parameters with the push() method but to retrieve them we have to use the NavParams service. Again open the src/pages/home/home.ts and modify About() method.

public About()
{
this.navCtrl.push(this.aboutPage,{param1:”hello”,param2:”World”});
}

Open src/pages/about/about.ts and modify the code.

export class AboutPage {
private param1:string;
private param2: string;
private allParams;

constructor(public navCtrl: NavController, public navParams: NavParams) {
this.param1=this.navParams.get(“param1”);
this.param2=this.navParams.get(“param2”);
this.allParams=this.navParams.data;
}

ionViewDidLoad() {
console.log(‘ionViewDidLoad AboutPage’);
}
back()
{
this.navCtrl.pop();
}
}

Using NavPush and NavPop in Ionic 3

NavPush is exactly same as push() method of NavController. NavPop is exactly same as pop() method of NavController. Open home.html and modify the content

<button ion-button [navPush]=”aboutPage”> Go to about</button>
<button ion-button [navPush]=”contactPage”> Go to Contact </button>

home.ts

export class HomePage {
public aboutPage=AboutPage;
public contactPage=ContactPage;

public myParams =
{
param1:”Hello”,
param2: “World”
};

home.html

<button ion-button [navPush]=”aboutPage” [navParams]=”params”> Go to About</button>
<button ion-button [navPush]=”contactPage ” [navParams] = “params” >Go to Contact </button>

about.html

<button ion-button navPop>Go back</button>

contact.html

<button ion-button navPop>Go back</button>

Using nav in Ionic 3

nav allows to set the root page from HTML views. src/app/app.html : In this file you are going to find the code associated with the root app.

<ion-nav [root]=”rootPage”></ion-nav>

In the src/app/app.component.ts the root page is set as HomePage

@Component({
templateUrl: ‘app.html’
})
export class MyApp {
rootPage:any = HomePage;
}

Using Navbar in Ionic 3

It is the navigational toolbar which you can find on the top of your app pages. A Navbar contains a title, buttons, segment, search bar etc.

Example : – Add some buttons to our Navbar

<ion-header>
<ion-navbar>
<ion-title>Ionic3 navigation demo</ion-title>
</ion-navbar>
<ion-buttons end>
<button ion-button icon-only (click)=”open()”>
<ion-icon name=”options”></ion-icon>
</button>
</ion-buttons>
</ion-header>