How to move one page to another page in ionic 2?

Question

I am trying to navigate from one page to another using ionic 2.

I am learning from https://ionicframework.com/docs/v2/api/navigation/NavController/

export class ApiDemoPage {
  constructor(public navCtrl: NavController){
    alert('contr');
  }
  clickMe(){
    alert('---')
  }
}


@Component({
  template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
  root = ApiDemoPage;
}

@Component({
  template: '<p>hello</p>'
})
export class secondPage {
}

Here is my code

https://plnkr.co/edit/5eDjTOtNu46liZHiuHdG?p=preview

Getting this error (SystemJS) Error: Can't resolve all parameters for ApiDemoPage: (?).(…)

Solution 1

You want navigate from one page to another using ionic 2. It just simple. You should use NavController and follow step by step.

• Create two pages "StartPage" and "OtherPage".
• On file StartPage.ts, you import page about and inject NavController into contructor and event navigate to other page.

For example:

@Component({
   template: `
   <ion-header>
     <ion-navbar>
       <ion-title>Login</ion-title>
     </ion-navbar>
   </ion-header>

   <ion-content>
     <button ion-button (click)="pushPage()">
       Go to OtherPage
     </button>
   </ion-content>
   `
})
 export class StartPage {
  constructor(public navCtrl: NavController) {
  }

  pushPage(){
    // push another page on to the navigation stack
    // causing the nav controller to transition to the new page
    // optional data can also be passed to the pushed page.
    this.navCtrl.push(OtherPage);
  }
}

Cheer!

Solution 2

Create a new page use syntax

ionic g page FirstPage

this command create folder of FirstPage in pages which include html,scss and ts file

After that import this page in app.module.ts file and also in declaration and in Entries component

@NgModule({
  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    FirstPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    FirstPage
  ]

then import navcontroller and ewly created page in filename.ts file (.ts file from which you want to move on another page ) and create constructor

import { NavController } from 'ionic-angular';
import { FirstPage} from '../first-page/first - page';

constructor(public nav:NavController){

}

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

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

ANd in filename.html call function

<button ion-button color="secondary" (click)="nextPage()"> My First Page </button>

Comments

[Mohsen]

Is any way to use string for push navCtrl? I want to push components dynamic to ionic nav controller

[Jaydip Kalkani]

i have a tablayout and i want to navigate from one tab to another. how can i achieve it?