How to disable side menu in ionic 4?

Question

I am using, this.menuCtrl.swipeEnable(false); for ionic 3 app. This works fine for disabling the side menu. But, it doesn't work for ionic 4! Below is my ionic 4 code sample:

login.page.ts

constructor(public loginService: LoginService, private router: Router, public menuCtrl: MenuController) {
    this.menuCtrl.swipeEnable(false);
   }

app.component.html

<ion-app>
  <ion-split-pane>
    <ion-menu type="push">
      <ion-header>
        <ion-toolbar color="success">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Solution 1

this.menuCtrl.enable(false);

This will also work in constructor. I am using this in an ionic v4 - beta.2 project and it works fine.

Also, I see that you are using ionic with angular so you can also OnInit lifecycle hook.

Solution 2

Try

this.menuCtrl.enable(false);

This also seems to be answered here disable menu on login page ionic 4

Solution 3

First, swipeEnable() is now swipeGesture().

Second, I had a similar problem with the MenuController and banged my head against a wall for longer than I'll disclose before realising it'd be wise to read the ionic core docs.

I had multiple side menus each with a unique id, set to false by default, which had to be enabled on particular pages. But MenuController wasn't recognising the id's I was passing in.

Concussed to the point of unconsciousness, I opened the ionic core docs on github and learned that MenuController now looks for menu-id, not id. So:

<ion-menu menu-id="myMenu">...

grabbed by, for example:

this.menuCtrl.enable(true, 'myMenu')

works.

As always in retrospect, both the new method and the solution to finding it seem so obvious.

Solution 4

Try this inside your login.page.ts

constructor(private navCrtl: NavController, private menu: MenuController) { this.menu.enable(false); }

Solution 5

For me its work inside method ngOnInit

ngOnInit() { 
 this.menuCtrl.enable(false); // or true 
}

View more solutions

Comments

[Abhijit Mondal Abhi]

I tried this.menuCtrl.enable(false); in my constructor. But, it doesn't work for ionic 4. But, when I wrote ionViewWillEnter() { this.menuCtrl.enable(false); } this method and called this from constructor it works fine! @Troy DC Thompson

[Abhijit Mondal Abhi]

Yes I am using ionic 4 with Angular. But, it doesn't work if I write this this.menuCtrl.enable(false); in constructor. But whenever I write ionViewWillEnter() { this.menuCtrl.enable(false); } it works fine. But, it creates problem when I restart the server. So, I also call ionViewWillEnter() method from the constructor also. Then it works fine!

[ashfaq.p]

ionViewWillEnter is a lifecycle event and it should never be called manually. And I am using above code in constructor and it works fine

[Abhijit Mondal Abhi]

Yes I know ionViewWillEnter is a life cycle event. But when I restart the server ionViewWillEnter doesn't work for the first time. I don't know why this happens. For this I have called ionViewWillEnter in the constructor.

[ashfaq.p]

This means there is some other issue in the code. ionViewWillEnter will be called twice if u call it manually too

[Jai]

I should note however that the MenuController still isn't working as it should be, even though it now recognises the id. If I place the enable code inside the constructor or ngOnInit, it doesn't do anything. It's like the controller takes too long to load. Hence I'm currently enabling the menu(s) with @HostListener, which isn't optimal.

[niczm25]

Have you encounter ASSERT: can not be animating in ion-menu when disabling a menu?