Load ion-menu content from another component

Hi! i’m using ionic and angular and i’m trying to crate a side-menu loading content from another component (page maybe?)… i will give you some exemple:

STANDARD FROM app.component:

<ion-app>
  <ion-menu contentId="main-content" side="start">
    <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 page of pages">
          <ion-item [routerLink]="page.path" routerDirection="root" [class.active-menu]="activePath === page.path">
            {{page.name}}
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-router-outlet id="main-content" main></ion-router-outlet>

</ion-app>

i want to create something like:
app.component:

<ion-app>
  <ion-menu contentId="main-content" side="start">
    <app-side-menu></app-side-menu>
  </ion-menu>

  <ion-router-outlet id="main-content" main></ion-router-outlet>

</ion-app>

side-menu:

<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 page of pages">
          <ion-item [routerLink]="page.path" routerDirection="root" [class.active-menu]="activePath === page.path">
            {{page.name}}
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>

Is that possible? how can i route my app? thanks! (Sorry for my english)

I mean, you could do this, but Im not sure there’s any benefit to splitting things out like this to be honest.

It seems like premature componentization IMO.
Meaning, there’s really no benefit or reason to split this out into it’s own component.

Food for thought!

2 Likes

ok, thanks you! it was just an idea, i don’t know why i want to do that, maybe just for order :sweat_smile:
perhaps using this method it would be easier to modify the contents of the menu adapting it dynamically to the state of the app… just thinking!

Thank you a lot again! :smiley:

I tried to explore this approach for the use case where I had side menus on both sides and they would dynamically change (*ngIf) based on needs.

Did you try to implement it?

For me the issue was (i think it might be a bug) that inside ion-menu there are 3 slots (header, content, footer) that are “projecting” content, so when I would use my custom app-side-menu component - it would go into one of the slots and I could not at that time figure how to make it work without breaking layout.

@mhartington do you think I need to log that as issue / bug? I personally think this is a niche use case (for custom menu via component).

1 Like