How to create sidemenu based on pages?


#1

I need to create side menu based on pages.In my side menu contains home settings and profileUpdate.
suppose i click profileUpdate automatically change side menu and side menu values are change password ,updateInformation in side menu


#2

I think, for this setup, you should start creating a sidemenu app.
Here’s the command for creating a sidemenu app.
Lets assume your projectname is myapp. So,

ionic start myapp sidemenu --v2 --ts

Note: --v2 represents ionic version2 and --ts indicates that we are gonna use typescript.
Now you have a side menu app.
You can create new pages by using the command:
ionic generate page pagename


#3

Thank you.

but i already create side menu application.it is dynamic but i need to change side menu in based on pages.


#4

Okay, for this, go to app.component.ts file and look for something like this.

this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'History',component:History},
      { title: 'Settings',component:Settings },
      { title:'Credits',component:Credits }
    ];

I will explain this to you first. There are the pages I created for my app. Each pahe has itw own component and I’m mentioning the title I wanna display in sidemenu and the component to choose when clicking on it.

In app.htmll, you will see a button or something which iterates this pages array.

*ngFor="let p of pages"
and there will be a click listener added to this element which calls a function. In my case, the function name is openPage(p) and I pass the value being iterated as a parameter. If you check the function code, you will notice navigation to the page is done from here.

Note: Don’t forget to add declarations and entryComponents for pages you create.


#5

Thank you so much. already i developed mobile application.my application contains two logins one is user and another one is vendor.
based on login side menu is loaded.but entire application contains only one side menu.
i need two side menus.
one side menu for user another side menu for vendor

i’m looking for your help…


#6

You can have several ion-menus just ad id property to them. After you may pass menu’s id to MenuController's enable()/toggle() methods for enabling specific menu. Here is an example. Another great example is Ionic conference app. MenuController’s API doc.


#7

Thank you for yours help.i’m using ionic version 1 not ionic 2.
it’s not working on ionic 1. can you refer me any other links


#8

For Ionic1 you can use another tricks like adding a special ion-nav-view inside your ion-side-menu and then add a proper template and controller when you describe states or catch events.