How to disable side menu are some pages

Ionic Framework ionic-v3
1

Im Used Ionic 3 for my university project, Im added side menu for my application

Side menu displayed all of project, but I want to disable menu option in some pages , How to disable in menu option

app.html

<!--------------------------------------Main Navigation--------------------------->

<ion-menu [content]="content" side="right">
  <ion-header>
    <ion-toolbar>
      <ion-title>List View</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content >
    <ion-list >
    <button menuClose ion-item *ngFor="let p of pages"[class.activeHighlight]="checkActive(p)" (click)="openPage(p)" > <ion-icon [name]="p.icon" item-left></ion-icon>{{p.title}}</button>


    </ion-list>
  </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false" ></ion-nav>
<!--------------------------------------Main Navigation--------------------------->

Thanks

1 Like
2

I found some solution

So that this,

<ion-menu [content]="content">
Becomes this.

<ion-menu id="myMenu" [content]="content">

and after
Openlogin.ts and import theMenuController from ionic/angular.

The following worked for me on Ionic2 v.2.2.0

Open src/app/app.html and add an ID to your element
So that this,

<ion-menu [content]=“content”>
Becomes this.

<ion-menu id=“myMenu” [content]=“content”>
Open login.html and remove the code from so that the menu will not display on the page.
Open login.ts and import the MenuController from ionic/angular.
In the constructor set enable() on MenuCtrl to false and add the menu ID as the second parameter. Even though the menu isn’t showing, doing this will prevent the user from swiping to open the menu.

 constructor(
    public navCtrl: NavController,
    public menuCtrl: MenuController
  ) {
    this.menuCtrl.enable(false, 'myMenu');
  }
12 Likes
3

thanks very much , :smiley:

1 Like
4

I could deactivate the lateral menu on the login page, since that menu should only appear when the user is already on the home page,

The first thing I did was to follow in Madhawa’s footsteps, that is, assign an id to the menu and then disable it with
this.menuCtrl.enable (false, ‘myMenu’);

however this disabled my menu in the whole application so after I had to re-activate it on the home page.ts

ionViewWillEnter () {
this.menuCtrl.enable (true, ‘myMenu’);
}

4 Likes
5

The menuCtrl works, but I was having some issue using it with the ion-split-pane when the device screen is large. It only disables the menu when the page is loaded and we may need it to be disabled a few milliseconds before that.

If we setup a variable that holds user information right after a success login, clear it on logout and put it into the enabled attribute of ion-split-pane it does the do job really well.

<ion-split-pane [enabled]="authentication.user">

Authentication in this example is a provider that does a few HTTP requests for the LoginPage.

2 Likes
6

What if I want to disable a button based on a condition inside the side menu? The condition needed to check will be available only after I login to the application. In the app.component.ts I’m defining my pages like

this.pages = [
 {
   title: "a",
   component: aPage,
   src: "..",
 }, ......, {}
]

And in my app.html I’m using ngFor inside a button to loop through the pages to display like

<ion-menu [content]="content side="right persistent="true" (ionOpen)="openMenu()">
 <ion-header>
 ......
 </ion-header>
 <ion-content>
  <ion-list>  
  <button 
      id="{{p.title}} 
      menuClose 
      ion-item 
     *ngFor="let p of pages"
     (click)="openPage(p)"
   ><span>{{p.title}}</span></button>
  </ion-list>
 </ion-content>
</ion-menu>

I want to disable a button based on a condition hot to do that ?