How to create different menu page for each page - ionic4

Question

I am using Ionic 4, I want to do different menu content in different page. I have add menuId inside my code, but I only get the second page menu. My first page menu is missing.

Answer 1

I think you should build 1 menu and then just populate its page list depending on the page being visited.
So your code would look something like this:
import { Component, OnInit } from '#angular/core';
import { Router, RouterEvent } from '#angular/router';
#Component({
selector: 'app-menu',
templateUrl: './menu.page.html',
styleUrls: ['./menu.page.scss'],
})
export class MenuPage implements OnInit {
selectedPath = '';
pages = getPages();
constructor(private router: Router) {
this.router.events.subscribe((event: RouterEvent) => {
if (event && event.url) {
this.selectedPath = event.url;
}
});
}
getPages() : any[] {
if (this.router.url === '/page1') {
return [
{
title: 'First Page with Tabs',
url: '/menu/first'
},
{
title: 'Second Page blank',
url: '/menu/second'
}
];
}
if (this.router.url === '/page2') {
return [
{
title: 'First Page with Tabs',
url: '/menu/first'
},
{
title: 'Second Page blank',
url: '/menu/second'
}
];
}
}
ngOnInit() {
}
}
And then display it like this:
<ion-split-pane>
<ion-menu contentId="content">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
<ion-item [routerLink]="p.url" routerDirection="root" [class.active-item]="selectedPath.startsWith(p.url)">
<ion-label>
{{ p.title }}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-item tappable routerLink="/login" routerDirection="root">
<ion-icon name="log-out" slot="start"></ion-icon>
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content" main></ion-router-outlet>
</ion-split-pane>
Full tutorial about setting up a menu like this is available here:
How to Combine Ionic 4 Tabs and Side Menu Navigation [v4] - Ionic AcademyIonic Academy
Although the code I used as an example above for get getPages() is the bit you would write yourself.