CODEWITHSUNDEEP
angularionic-frameworkionic4router-outlet
user5616242
user5616242

Reputation:

Ionic v4 menu only works when router-outlet has the main attribute

I'm building an app with ionic v4 the first time and I want to include a side menu.

For testing reasons, I first put it inside of the app.component.html but I couldn't let it swipe out or in.

So I saw in the documentation, that they added the main attribute on the ion-router-outlet but as far as I read: it is not documented anywhere.

I don't know, why I'd have to add this, to make it actually work.

Source: https://ionicframework.com/docs/api/menu

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

So I came across this: https://ionicframework.com/docs/api/router-outlet#properties where basically the component gets explained BUT

this property isn't documented at all. I can't find it.

So to everyone: Do I need to add this and when: why?

My menu is pretty basic but I print it out below, so you guys can see what i've build.

<ion-app>
  <ion-menu menuId="sideMenu" swipeGesture="true">
    <ion-header>
      <ion-toolbar>
        <ion-button slot="start">
          <img alt="logo" src="../assets/logo.svg">
        </ion-button>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Attack</ion-item>
        <ion-item>Defence</ion-item>
        <ion-item>Feedback</ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet main></ion-router-outlet>
</ion-app>

Upvotes: 6

Views: 4560

Answers (1)

Loke
Loke

Reputation: 1065

The main attribute is a custom attribute that has no function by it self. Other components may rely on it. ion-menu will attach classes to the component that matches the contentId OR if this is not set with the element that has the main attribute.

You can see this by looking at the source code :

const content = this.contentId !== undefined
  ? this.doc.getElementById(this.contentId)
  : parent && parent.querySelector && parent.querySelector('[main]');

if (!content || !content.tagName) {
  // requires content element
  console.error('Menu: must have a "content" element to listen for drag events on.');
  return;
}
this.contentEl = content as HTMLElement;

// add menu's content classes
content.classList.add('menu-content');

To put it another way, you don't have to set the main attribute if you instead set an id on ion-content (just not the one inside ion-menu). You can also set the id on ion-router-outlet which will be the same thing as setting the main attribute.

Upvotes: 4

Related Questions