listNavigation is an important component of many mobile apps. We can use to use the menu to navigate to different pages in our apps. Most of the apps don’t have two menus. Just for learning, we will add two menus, one for left and right side of ion-nav.
Step 1 : ionic start LeftRightMenu sidemenu
We will remove existing page template page and add two more page as Page1 and Page2.
Step 2: We need to change and add some code in app.module.ts
ionic generate page page1 page2
we will remove default page and import two new page as follow
We have to change rootPage: any = HomePage; to rootPage: any = Page1; in app.component.ts
Step 3: To create menu we need to add following code in app.html
Each ion-menu directive must have [content]=”content” declared because it will use the content area to bind swipe left or right. In this case, it is basically a local variable in ion-nav as above.
In this app we have two pages, that is page1 and page2. Add the same header for both page1.html or page2.html, where ion-content will be different for both pages.