Home / Questions / 35400
Accepted
Wuilmer Medrano
Asked: 2020-11-23 15:42:53 +0800 CST 2020-11-23 15:42:53 +0800 CST

Add sidemenu with ionic 2

  • 772

Hello I have a project in development with ionic. And I need to display a sidemenu, but the examples I've gotten are using the ionic sidemenu template which works very differently. If you could explain me or place a link to see how I could do it

ionic

1 Answers

  1. Best Answer

    It's simple, create a new component in the view ( HTML ) and add the following:

     <ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button menuClose ion-item>
        Opcion 1
      </button>
      <button menuClose ion-item>
        Opcion 2
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

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

    And this in the ".ts" file :

    import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'menu.html',
})
export class MenuPage {

  public rootPage: any;

  constructor(private navCtrl: NavController) {
        this.rootPage = HomePage;
  }

}

    To use it in another component you will only have to add a button with the property menuTogglein this way:

    <button ion-button icon-only menuToggle>  <ion-icon name="menu"></ion-icon </button>
    • 0