Navigation in Ionic 2

Details Page Push

this.navCtrl.push(Details);

Get Params In Details

import { NavParams } from 'ionic-angular';

@Component({
  templateUrl:’details.html’
})
class Details {
  constructor(private navParams: NavParams) {
     let username = navParams.get('username');
     let email = navParams.get('email');
  }
}

How to Call Pop

this.navCtrl.pop();

How to use ion-nav

import { Component } from `@angular/core`;
import { ionicBootstrap } from 'ionic-angular';
import { StartPage } from './start-page';

@Component(
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
class MyApp {

  // set the rootPage to the first page we want displayed
  private rootPage: any = StartPage;

  constructor(){ }
}
ionicBootstrap(MyApp);

Import NavController

import { NavController } from 'ionic-angular';

Insert Method

insert(insertIndex, page, params, opts, done)

Instantiate NavController

class MyComponent {

  constructor(public navCtrl: NavController) { }
}

Navigation from Root Component

import { App, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Details } from './details';

@App({
   template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {

   @ViewChild('myNav') nav: NavController
   private rootPage = OtherPage;

   ngAfterViewInit() {
      this.nav.push(Details);
   }
}

navParams Example

import { Details } from './details;

@Component({
  template: `<button ion-button [navPush]="pushPage" [navParams]="params">Go</button>`
})
class MyPage {

  constructor(){
    this.pushPage = Details;
    this.params = { username: “bhnmzm”, email:”[email protected]”  };
  }
}

navPop Example

<button ion-button navPop></button>

navPush Example

<button ion-button [navPush]="pushPage"></button>

Pop Method Structure

pop(params, opts, done);

popToRoot Method

popToRoot(opts, done)

Push Data to Details

this.navCtrl.push(Details, { username: “bhnmzm”, email:”[email protected]” });

Push Method Structure

push(page, params, opts, done);

Remove Method

remove(startIndex, removeCount, opts)