CODEWITHSUNDEEP
angularionic-frameworkionic2ionic3
Madpop
Madpop

Reputation: 725

How to create dynamic side navigation menu&Submenu in ionic2/3

I am facing a small issue here im getting the below dynamic data

{
  "Name": "Steve",
  "Id": 37,
  "email": "[email protected]",
  "User": 10,
  "DevId": "A7E6E6FE7060",
  "AllowedMenu": [
    {
      "Name": "Main",
      "Id": 6,
      "Component": "MainComponent",
      "IsVisibleAsMenu": true
    },
    {
      "Name": "SessionData",
      "Id": 7,
      "Name": SessionComponent,
      "IsVisibleAsMenu": false
    },
    {
      "Name": "LoginData",
      "Id": 8,
      "Name": "LoginDataComponent",
      "IsVisibleAsMenu": true
    }
  ],
  "AllowedOptions": [
    {
      "Name": "UpdatedData",
      "Id": 9
    },
    {
      "Name": "PreviousData",
      "Id": 10
    }
  ]
}

After loggin in by using username and password im getting the above response by using that i have to build the dynamic side navigation. At present im following a approach by using the switch case in login page im mentioning each and every component and if the case is correct then it is going to that particular page. below are my issues

Are there any other approaches for getting Dynamic Side navigation ? after login based on the response the side navigation is created.

1.How can i create Sub menus in dynamic side navigation?

2.here AllowedMenu is menu content and IsVisibleAsMenu mean it we to display menu then true other wise false

Upvotes: 2

Views: 2336

Answers (2)

Duannx
Duannx

Reputation: 8726

Here is a working example

First, you need a provider to save your menu items. In the example above:
app-service.ts

import { Subject } from 'rxjs/Subject';

userId = 1; //this varible store your userId
menuItems = []; //this array store your menu items
menuSubject: Subject<string> = new Subject<string>(); //Here is the subject will broadcast an event whenever menu item change

//this function is called when you change the user
changeUser(userId) {
    this.userId = userId;
    //Get menu data from server then update your menu
     if(userId == 1){
        this.menuItems = [...] //See all code in the example above
     }
    this.menuSubject.next("new menu items have arrived");
  }

Second, in your show the menu in your app:
app.html:

<ion-menu [content]="content" swipeEnabled="true" class="menu" type="reveal" width="100px">
  <ion-list>
    <ion-item class="menu-item" *ngFor="let item of menuItems" (click)="itemClick(item.component)">{{item.name}}</ion-item>
  </ion-list>
</ion-menu>
<ion-nav id="nav" #content [root]="rootPage"></ion-nav>

app.component.ts:

import { Platform, MenuController, App } from 'ionic-angular';
constructor(platform: Platform,
    private appService: AppService,
    private menuCtrl: MenuController){
    this.menuItems = this.appService.menuItems;
    //Subscribe whenever menu items changed
    this.appService.menuSubject.asObservable().subscribe(() => {
      this.menuItems = this.appService.menuItems;
      this.menuCtrl.open();
    })
}

//This function is called whenever menu item clicked
itemClick(component){
    this.rootPage = component;
}

Finnally, whenever you change the user (by login or whatever you want), call the changeUser method in appService home.ts:

//See the full code in example
this.appService.changeUser(+userId);

Upvotes: 4

Vikhyath Maiya
Vikhyath Maiya

Reputation: 3192

I am not an ionic guy so dont know the ionic way, but i have done this in angular way. It might help you to get the gist of it. Instead of the response having the component names, you can have an additional field called path which will have the route defined like this.

path: '/home'

So when the user clicks on the item , you can write login to route to the mentioned path.

For your second question you can refer here

Upvotes: 1

Related Questions