CODEWITHSUNDEEP
angularionic-frameworkionic3angular6ionic4
mmaier96180
mmaier96180

Reputation: 48

Disable Menu in Ionic4

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?

Upvotes: 2

Views: 192

Answers (4)

John Arc
John Arc

Reputation: 183

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.

Upvotes: 0

mobby
mobby

Reputation: 371

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);
}

Upvotes: 0

Kabir
Kabir

Reputation: 1489

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>

Upvotes: 1

ViqMontana
ViqMontana

Reputation: 5688

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?

Upvotes: 0

Related Questions