Search code examples
ionic-frameworknavigation-drawerback-buttonandroid-side-navigation

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>


Solution

  • 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