I'm working with ionic tab template to which I added a navigation drawer. I want the navigation drawer to be available to all the tabs, but I don't want to repeat the markup for the content of drawer in all the tab pages. How do I include this content dynamically (something like php include()
). Your help will be greatly appreciated.
Here is my code
<ion-header>
<ion-toolbar color="primary">
<ion-title>Welcome</ion-title>
<ion-buttons start left>
<button menuToggle ion-button small icon-only color="royal">
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<!-- NAVIGATION DRAWER MARKUP THAT I DONT'T WANT TO REPEAT -->
<!-- STARTS HERE -->
<ion-menu [content]="mycontent">
<ion-content>
<ion-list>
<ion-item small>
<ion-icon ios="ios-contact" md="ios-contact" item-left></ion-icon> Profile
</ion-item> <!-- more content -->
</ion-list>
</ion-content>
</ion-menu>
<!-- ENDS HERE -->
<!-- NAVIGATION DRAWER MARKUP THAT I DONT'T WANT TO REPEAT -->
<ion-nav #mycontent [root]="homePage"></ion-nav>
<ion-content padding>
<!-- CONTENT OF THE HOME-PAGE -->
</ion-content>
This is what the rootPage (HomePage) looks like . . .
Check Persistent Menu section here
You need to set
It should display for all your tabs unless you dont want to set menu for inner pages. Sample menu code by ionic here The menu for the entire app is set here