Navigation

Navigation in Ionic works like a simple stack, where we push new pages onto the top of the stack, which takes us forwards in the app. To go backwards, we pop the top page off. Using push to navigate to a new page is simple, and Ionic’s navigation system is very flexible.

You don't have to implement a stack by yourself, Ionic 3 has already done that for you. You can easily accomplish navigation by using the NavController component which is injected into every page constructor alongside many other components.

The NavController component exposes many methods so you can control the navigation stack but NavController is not the only available component for navigation, there are other components:

NavController

Let's say we have an About page and a Contact page. If we import those pages in our HomePage, then we can navigate to them by using the push() method : 

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 gotoAbout(){
        this.navCtrl.push(AboutPage);
    }

    public gotoContact(){
        this.navCtrl.push(ContactPage);
    }
  }

Now these two methods can be made available on the home.html page : 

  <button ion-button (click)='gotoAbout();'>Go to about</button>
  <button ion-button (click)='gotoContact()'>Go to contact</button>

To go back, we use the pop() method : 

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

NavParams

In many situations we need to pass parameters from one page to another for example from a list page to a detail page. You can pass parameters with the push() method of NavController as the second parameter of the method and retrieve them by injecting NavParams.

To pass them : 

gotoAbout(){
  this.navCtrl.push(this.aboutPage,{param1 : "hello" , param2 : "world"});
}

And to retrieve them : 

  import { NavParams } from 'ionic-angular';

  Injecting service and retrieving parameters

    @Component({
      selector: 'page-about',
      templateUrl: 'about.html'
    })
    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 ;
      }
   }

Nav

Nav is a declarative equivalent of NavController which allows you to set the root page from HTML views. In src/app/app.html file, the view associated with the root app component, you find this code : 

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

In the src/app/app.component.ts file, the rootPage is set to HomePage : 

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

You can also set the root page using NavController' setRoot() method : 

  this.navCtrl.setRoot(HomePage);

Navbar

A Navbar is the navigational toolbar which you find on top of your app pages with a back button. A Navbar may contain a title, buttons, a segment and a search bar etc. In your homepage (home.html) you can find : 

 <ion-header>
 <ion-navbar>
     <ion-title>
     Ionic Blank
     </ion-title>
 </ion-navbar>
 </ion-header>

Now you can add buttons to this Navbar : 

 <ion-header>
     <ion-navbar>
         <ion-title>
             Ionic 2 navigation demo
         </ion-title>
     </ion-navbar>
     <ion-buttons end>
         <button ion-button icon-only (click)='openModal()'>
             <ion-icon name="options"></ion-icon>
         </button>
     </ion-buttons>
 </ion-header>