Disable Menu in Ionic4

user_10664611 0
Viewed 136

I'm new to Ionic4 and currently working on an app for my thesis. The question seems very simple but I searched for hours and still don't have a working awnser.

SCENARIO:

On my app.component.html I got a simple SideMenu:

<ion-app>
    <ion-split-pane>
        <ion-menu>
        </ion-menu>
        <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
</ion-app>


And in the app.component.ts I get a value from the storage wheather it's the first login of the user. If it's the first login he should be routed to /intro:

this.storage.get('selectedClass').then( val => {
    this.firstLogin = val == undefined;
    if(this.firstLogin){
        this.router.navigateByUrl('/intro', { replaceUrl: true });
    }
});


On the intro page the user can click on a button which sets the storage variable and route back to /home

Question: How is it possible to hide the menu if the user is on the IntroPage?

angular6 ionic3 ionic4 ionic-framework angular
4 Answers

You can achieve this using ngIf

<ion-app>
    <ion-split-pane>
        <ion-menu *ngIf="!firstLogin">
        </ion-menu>
        <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
</ion-app>
user_11356510

So you want to hide the menu IF the user is on the intro page.

What I'd do is hide the menu using css, and add this css into the css file for the intro page. Then when the user enters the intro page, the intro css will be applied and the menu will be hidden. Does that make sense?

user_43006080

The best way to disable or enable a side menu is to use its enable() property. Considering that you only need it handled on the intro page and you only have a single menu, you can leverage Ionic's View load and leave methods as following in your intro page

ionViewDidLoad() {
  this.menuCtrl.enable(false);
}

ionViewWillLeave() {
  this.menuCtrl.enable(true);
}
user_21727830

The best way to enable/disable a menu in ionic is by using MenuController.

  1. Define the menu controller in your constructor. Make sure to import the MenuController.

    constructor(private menuController: MenuController){ }

  2. To enable the menu

    this.menuController.enable(true, yourmenuid);

  3. To disable the menu

    this.menuController.enable(false, yourmenuid);

You can put the menuController enable/disable code in your constructor or ngOnInit. Depending on when you want the menu to change.

user_92784900
Related