CODEWITHSUNDEEP
ionic4
qing
qing

Reputation: 885

How to create different menu page for each page

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.

Upvotes: 1

Views: 100

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

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.

Upvotes: 2

Related Questions