how to add an < ion-menu > only in a specific view? - ionic-framework

Question

I'm new to ionic and I want to know how to add an <ion-menu> for just one component (the first tab of my tabs section). how can I do this?
I need add this:
<ion-menu [content]="mycontent">
<ion-content>
<button ion-button (click)="show_message()">
</buttont>
</ion-content>
this is my code:
https://stackblitz.com/edit/ionic-5bunxz?file=pages/contact/contact.ts

Answer 1

Modify your tab 1 page (AboutPage in your case) like below
<ion-menu [content]="content">
<ion-header no-shadow no-border>
<ion-item no-lines>
<!-- Phase 2/3 PLEASE DO NOT DELETE THIS -->
<ion-avatar menuClose item-start>
<!-- <ion-avatar menuClose item-start> -->
<img [src]="'assets/imgs/user.png'">
</ion-avatar>
<h2>Test Emp</h2>
<h3>test3333</h3>
<p>Test4564565</p>
</ion-item>
</ion-header>
<ion-content style="background: #fff">
<ion-list no-lines>
<ion-item class="drawer-item" menuClose >
<ion-icon name="home" item-start></ion-icon>
Test
</ion-item>
<ion-item class="drawer-item" menuClose >
<ion-icon name="briefcase" item-start></ion-icon>
Test2
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-header no-shadow no-border>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title text-uppercase>About</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding #content>
esta es la segunda XDDD
<button ion-button block color="primary" navPop>back</button>
</ion-content>

Answer 2

add your menu component code in the app component page. So, your app.component.html page will look like below.
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Welcome Home</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>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
You can add dynamic pages from the component file as shown below.
Here is my app.component.ts file.
export class MyApp {
pages: Array<{title: string, component: any}>;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
this.pages = [{title: 'Home', component: HomePage},
{title: 'About', component: AboutPage}];
}
}
So, now this menu bar will be shown on each page of your app. Now, suppose you want to hide this page in About page then you can write below code in the component of your about page.
export class AboutPage {
constructor(public navCtrl: NavController, public navParams: NavParams,
public menu: MenuController) {}
ionViewDidEnter() {
//to disable menu, or
this.menu.enable(false);
}
}
So, by following above method you can hide menu button in any of your pages.