Generated back button click event in a sideMenu


#1

I try to generate a back button click calling automatically setBackButtonAction() method. I have a ion-segment in a side menu and so when i open the menu i would like to call setBackButtonAction() to click on the “segment2” button.

Screenshot from 2017-11-23 23:18:11

side menu in app.html :

    <ion-menu [content]="content" side="left" id="menuParameter">
    <ion-header>
        <ion-toolbar color="default">
            <ion-segment [(ngModel)]="segmentSelected" >                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                <ion-segment-button value="s1">
                  segment 1
                </ion-segment-button>
                <ion-segment-button value="s2"  click="setBackButtonAction()" >
                   segment 2
                </ion-segment-button>
            </ion-segment>
   </ion-toolbar>  
</ion-header>
...

here is my code in my app.component.ts

export class AppComponent {
public segmentSelected: string = 's1';

constructor(
    public platform: Platform,
    public statusBar: StatusBar, 
    public splashScreen: SplashScreen,
  public navCtrl :NavController) {
 this.platformReady();
}


  ionViewDidLoad() {
    this.setBackButtonAction()
}

//Method to override the default back button action
setBackButtonAction(){
  this.navBar.backButtonClick = () => {
  //Write here wherever you wanna do
   this.navCtrl.pop()
  }
}

public platformReady() {
    // Call any initial plugins when ready
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

but it doesn’t work. Any help ?


#2

There are a few things that have to be done to access the navbar. Have you done these?

  1. import Navbar
import { Navbar } from 'ionic-angular';
  1. import ViewChild
import { ViewChild } from '@angular/core';
  1. Add to component, and reference it with a name of your choice
export class AppComponent {
@ViewChild(Navbar) navbarName: Navbar;
  1. Now you should be able to get the back-button
setBackButtonAction(){
this.navbarName.backButtonClick = () => {
// Write here what you wanna do
this.navCtrl.pop()
 }
}

So, I just took another look at your code. I don’t see a navbar in your html…