I used ionic side menu stater project. Now I have a admin and a user and for both I need different side menu options, so how can i add two different side menu?

Ionic Framework ionic-v3
1

this is my app.component.ts:

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Storage } from '@ionic/storage';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { CreateuserPage } from '../pages/createuser/createuser';
import { AddProjectPage } from '../pages/add-project/add-project';
import { AssignProjectPage} from '../pages/assign-project/assign-project'; 
import { AdminPage } from '../pages/admin/admin';
import { UsrprojPage } from '../pages/usrproj/usrproj';
import { UsrProfilePage } from '../pages/usr-profile/usr-profile';
import { UserhomePage } from '../pages/userhome/userhome';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  userMenu: ({ title: string; component: typeof UserhomePage; } | { title: string; component: typeof UsrProfilePage; })[];
  adminMenu: ({ title: string; component: typeof AddProjectPage; } | { title: string; component: typeof UserhomePage; })[];
  pagess: Array <{ title: string; component: any }>;
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();
  

    // used for an example of ngFor and navigation
    this.adminMenu = [// admin menu starts-------------------------------
      { title: 'Home', component: AdminPage },
  
     // { title: 'List', component: ListPage },
     
      { title: 'Add User', component: CreateuserPage},
      { title: 'Add Project', component: AddProjectPage},
      { title: 'Assign Project', component: AssignProjectPage},
      { title: 'Logout', component: null}];
    
      //admin menu ends-------------
      this.userMenu = [
      { title: 'Home', component: UserhomePage},//usermenu starts-------
      {title: 'Profile', component: UsrProfilePage},
      {title: 'Projects', component: UsrprojPage },
      {title: 'Log Out', component: null}//user menu ends---------------
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    if(page.component) {
        this.nav.setRoot(page.component);
    } else {
        // Since the component is null, this is the logout option
        // ...

        // logout logic
        // ...

        // redirect to home
        this.nav.setRoot(HomePage);
    }
}


}

this is my app.html:

<ion-menu persistent= "true" [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

I need to show the side menu that belongs to admin in adminPage and side menu that belongs to user in UserPage.

2

@uddyvky

How will u identify a user and a admin?
Using *ngIf you can hide and show the sidemenu items
,for that u need to get a response which is unique to user and admin.
On the basis of that U can use the *ngIf on your project.
3

Thanks for your reply… I’ll try to implement that. But by getting a unique response do you mean from the backend??

4

@uddyvky Yes from backend

5

okay… and thanks for your reply!!