CODEWITHSUNDEEP
angularionic-frameworkionic2
Autumn_Cat
Autumn_Cat

Reputation: 800

Proper way to use menu in Ionic 2

I'm new with Ionic and trying to use menu with tabs like in conference app. Looks easy but somehow buttons in drawer don't work.

app.template.html

<ion-menu [content]="mycontent" persistent="true">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="outer-content">
    <ion-list>
      <button ion-item menuClose>
        <ion-icon item-left name="person" (click)="goToUserInfo()"></ion-icon>
        My information
      </button>
      <button ion-item menuClose>
        <ion-icon item-left name="log-out" (click)="logOut()"></ion-icon>
        Log out
      </button>
      <button ion-item menuClose>
        <ion-icon item-left name="hammer" (click)="goToTutorial()"></ion-icon>
        Show tutorial again
      </button>
    </ion-list>
  </ion-content>
</ion-menu>


<ion-nav id="nav" #mycontent [root]="rootPage"></ion-nav>

app.component.ts

@Component({
  templateUrl: `app.template.html`
})
export class MyApp {
  rootPage: any = DummyPage;
  @ViewChild(Nav) nav: Nav;

  constructor(public platform: Platform) {
    console.log('Hello from MyApp');
    this.initializeApp();


    }
\\
\\
\\
  goToUserInfo() {
    console.log(this.TAG + ' goToUserInfo');
    // this.navCtrl.push();
    this.nav.setRoot(UserInfoPage);
  }

  logOut() {
    console.log(this.TAG + ' logOut');
    // this.userData.logout();
    this.nav.setRoot(LoginPage);
  }

  goToTutorial() {
    console.log(this.TAG + ' goToTutorial');
    // this.navCtrl.push();
  }
}

But I'm not sure why clicking option in the menu doesn't trigger click event

Upvotes: 1

Views: 304

Answers (1)

eko
eko

Reputation: 40647

You should move your click event handlers to the button elements since there seems to be several people having problems with that usage: https://forum.ionicframework.com/t/ionic2-clickable-ion-icon/46512

Use it like this:

<button ion-item menuClose (click)="goToUserInfo()">
  <ion-icon item-left name="person" ></ion-icon>
    My information
</button>

Upvotes: 1

Related Questions