ionic-framework: bug: wrapped menu does not work with content property

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.3.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.15
   @angular-devkit/build-angular : 0.8.7
   @angular-devkit/schematics    : 0.8.7
   @angular/cli                  : 6.2.7
   @ionic/angular-toolkit        : 1.1.0

System:

   NodeJS : v8.11.3 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS

Describe the Bug

When putting the menu inside a custom component, (app-menu) to make the app component less busy, I get this result :

https://ibb.co/kUDFOV

But normally, I have to have the initial result :

https://ibb.co/cFcLqA

Steps to Reproduce

1 - Generate a new app with menu 2 - Put the ion-menu in the app-menu <ion-menu contentId="content1" > <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> 3 - Put the following in app.component: <ion-app> <ion-split-pane> <app-layout-menu contentId="content1" [content1]="content"></app-layout-menu> <ion-router-outlet id="content1" main [swipeBackEnabled]="true"></ion-router-outlet> </ion-split-pane> </ion-app>ion

Thank you for your answers !

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 2
Comments: 20 (5 by maintainers)

Commits related to this issue

fix(menu): menu can be encapsulated in a component (#28801) Issue number: resolves #16304, resolves #20681 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue.... — committed to ionic-team/ionic-framework by liamdebeasi 6 months ago

Most upvoted comments

Please try… app.component.html <ion-app> <ion-menu contentId="content" side="start"> <ion-header> <ion-toolbar> <ion-title>Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> menu stuff </ion-content> </ion-menu> <ion-router-outlet id="content" main></ion-router-outlet> </ion-app>

Home.html

<ion-header> <ion-toolbar color="primary"> <ion-menu-button autoHide="false"></ion-menu-button> </ion-toolbar> </ion-header>

https://stackoverflow.com/questions/53657275/ionic-4-adding-side-menu

Yogeshjuya1993 on Feb 1, 2019

I too am trying to get my “drawers” (side-menus within pages) to work. I was not able to get it to work with version 4.0.0-rc.2:

Ionic:

   ionic (Ionic CLI)             : 4.8.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.2
   @angular-devkit/build-angular : 0.12.2
   @angular-devkit/schematics    : 7.2.2
   @angular/cli                  : 7.2.2
   @ionic/angular-toolkit        : 1.2.2

System:

   NodeJS : v11.0.0 (/usr/local/Cellar/node/11.0.0/bin/node)
   npm    : 6.5.0
   OS     : macOS Mojave

I keep getting this error message:

Menu: must have a "content" element to listen for drag events on.

Eraldo on Jan 18, 2019

Is the final answer here that you can’t put a side menu is a custom component?

Going from @Yogeshjuya1993’s comment i have this in app.component.html

<ion-app>
  <ion-menu contentId="content" side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content> menu stuff </ion-content>
  </ion-menu>
  <ion-router-outlet id="content" main></ion-router-outlet>
</ion-app>

and in my custom header component.html i have this:

<ion-header class="ion-text-center ion-padding">
    <ion-buttons slot="start">
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>
  <img src="../assets/img/header.png">
</ion-header>

then, on every page i want my header (with side menu button), i add this: <app-header></app-header>

it almost works. On the start page when app runs, it works (except menu button is hidden when menu opens); but on every subsequent page, the button shows but doesn’t do anything (and no errors); and returning to start page, it also no longer works.

liquidcms on Jun 12, 2019

yes why not … personally I find the menu component poorly designed.

why not allow to put it in a proper component to him directly ? especially to simplify unit tests.

I take the example of my project where I have several roles and I initialize the menu according to the roles.

I also encounter the problem that I can not activate the menu once authenticated with a * ngIf because the expression false true is already verified because the menu is in the app.component

iTEEECH on Dec 20, 2018

I often have the use case where I have a main root side menu on the left, which is ever-present in the app. Then specific page(s) will have a right “menu.”

I hesitate to call the right ones menus; they are sub-functionality for a specific pages (and should be easily accessible from the page’s scope/code). It’s something that a popover could probably do, but a menu on the right feels better and swiping from the right edge is nice. Maybe there should be a distinction between menus and drawers, with the latter being sub-components of pages.

WhatsThatItsPat on Dec 20, 2018