Basic Navigation: Ionic 2

Today lets learn basics of navigation / routing in Ionic 2. Ionic 2 and Angular 2 makes use of navigation stack for its navigation system. i.e., we can push and pop views to and from navigation stack.

Forward Navigation: We push page reference of the page we want to navigate to.
Backward Navigation: We execute pop operation on navigation stack to remove the current view or top view.

Once we push a page reference of the page we want to navigate to, a back button or back arrow symbol is automatically added to the navigation bar and whenever user clicks on it, the pop operation is executed for us automatically.

Basic Navigation or Routing: Ionic 2

Generating Page using Ionic 2 CLI(Command Line Interface)

ionic g page Second

OR

ionic generate page Second

This command creates Second page for us – which will have a TypeScript page(class file or component), a template file and a sass file.

src/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SecondPage } from '../second/second';
 
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {}
  nextPage(){
    this.navCtrl.push(SecondPage);
  }
}

Here we import the SecondPage page. Next define nextPage method. When nextPage method is invoked, we push reference to the page we want to navigate to, to the NavController reference.

Important: Also make sure to import Second page inside src/app/app.module.ts file and specify the page reference inside declarations and entryComponents section.

src/pages/home/home.html

 < button ion-button (click)="nextPage();">
   Next Page
 < /button>

Here we invoke nextPage method when user clicks on ‘Next Page’ button. This should take the user to the second page. And the user will be presented with a back button in the second page, so that he or she can navigate back to the home page or the first page again – which calls pop method on NavController reference automatically.

Set Root Page

this.navCtrl.setRoot(SecondPage);

using setRoot method, and passing the page reference of the page you want to set as root page, you can set the root page dynamically.

src/pages/second/second.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
 
@Component({
  selector: 'page-second',
  templateUrl: 'second.html'
})
export class SecondPage {
  constructor(public navCtrl: NavController) {
    this.navCtrl.setRoot(SecondPage);
  }
}

Next Video Tutorial
In the next video tutorial we shall learn to pass data between pages while navigating.