2019 ionic 4 - Multiple side menus in Ionic 4

@Maceno wrote:

Dont’t working this tutorial for menu diferente https://ionicframework.com/docs/api/menu

Is always calling the same menu.

APP.COMPOMENT.HTML

<ion-app>
    <ion-split-pane>
      <ion-menu menu-id="menu1" side="start" enabled="true" swipeGesture="false" persistent="true">
        <ion-header>
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
              <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
                <ion-icon slot="start" [name]="p.icon"></ion-icon>
                <ion-label>
                  {{p.title}}
                </ion-label>
              </ion-item>
            </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>

      <ion-menu menu-id="menuAdmin" enabled="true" persistent="true" side="end" swipeGesture="false"> 
          <ion-header>
            <ion-toolbar>
              <ion-title>Menu</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content>
            <ion-list>
              <ion-menu-toggle auto-hide="false" *ngFor="let p of appPagesAdm">
                <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
                  <ion-icon slot="start" [name]="p.icon"></ion-icon>
                  <ion-label>
                    {{p.title}}
                  </ion-label>
                </ion-item>
              </ion-menu-toggle>
            </ion-list>
          </ion-content>
        </ion-menu>

      <ion-router-outlet main></ion-router-outlet>

    </ion-split-pane>
  </ion-app>
  

APP.COMPOMENT.TS

 public appPages = [
    {
      title: 'Home',
      url: '/home',
      icon: 'home'
    },
    {
      title: 'Perfil',
      url: '/usuario',
      icon: 'md-contact'
    },
    {
      title: 'Sair',
      url: '/logout',
      icon: 'md-exit'
    }
  ];

  public appPagesAdm = [
    {
      title: 'Grupo',
      url: '/lista-grupo',
      icon: 'md-contacts'
    }
  ];

HOME.TS

  constructor(
    private menu: MenuController
  ) {

  }

  ngOnInit() {
    this.menuAdmin();
  }

  menuAdmin() {
    this.menu.enable(true, 'menuAdmin');
  }

HOME.HTML

<ion-header>

    <ion-toolbar>
      <ion-buttons menu-id="menu1" slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
      
      <ion-title>
        Home
      </ion-title>

      <ion-buttons menu-id="menuAdmin" slot="end">
          <ion-menu-button></ion-menu-button>
      </ion-buttons>

    </ion-toolbar>

</ion-header>

SOMEBODY KNOWS WHAT IS THE PROBLEM?

Posts: 1

Participants: 1

Read full topic