CODEWITHSUNDEEP
ionic-frameworknavigation-drawerback-buttonandroid-side-navigation
supriya chauhan
supriya chauhan

Reputation: 319

Back button is not available when teversing application page from side navigation menu in ionic 2

I am developing an ionic 2 mobile application, i found when i visit a page through side navigation panel it does not providing the auto generated back button on the particular page, while when i am going to the page in normal traversing form one page by one then that page is available with back button. How could i get the back button from the side navigation panel menu, Please suggest.

<ion-header>

  <ion-navbar color="primary">
  <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>dashboard</ion-title>
  </ion-navbar>

Upvotes: 2

Views: 474

Answers (1)

Anil
Anil

Reputation: 996

If you have created sidemenu app while creating a project you can see the below code in app.component.ts

constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: Createpage}
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    this.nav.setRoot(page.component);
  }

as you can see in the openPage function it sets the page component as root, hence you cannot see back button, instead you see the hamburger icon, which open sidemenu

NOW

if you still wish you to open the page from sidemenu with back button here is what you can do

openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    if(page.component == HomePage){
      this.nav.setRoot(HomePage);
    } else {
      this.nav.push(page.component);
    }
  }

in the above code you check if its the backbutton component ( which you wished to open with back button), if it's true you can set it push instead of setRoot

comment for more clarification

Upvotes: 1

Related Questions