Angular Ionic Side Drawer does not render

Question

I have an angular ionic app and I am trying to set up a side drawer. I have the following in very basic code which is based off of the ionic starter app. I can't figure out why my side drawer does not render. I've followed samples and looked at the ionic documentation.

app.component.html

<ion-app>
  <ion-menu side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>
          Sample App
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>
          <ion-icon name="business" slot="start"></ion-icon>
          <ion-label>Sample Drawer Item</ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet main></ion-router-outlet>
</ion-app>

test.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menuitem menu="m1"></ion-menuitem>
    </ion-buttons>
    <ion-title>places</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

score 1 · Answer 1 · answered Jul 04 '20 at 01:11

Answer found here: Ionic4 component - Menu: must have a 'content' element to listen for drag events on.

The official documentation does mention content-id="main" in the ion-menu property, but does not mention adding it to <ion-content id="content">. Without adding id="content" to ion-content as suggested in the linked post above, it didn't work for me.

Angular Ionic Side Drawer does not render

1 Answers1