How to disable side menu in certain pages in ionic 5 angular?

Ionic Framework
1

I created my project using ionic start [project name] sidemenu. I generate another page called login. I can’t seem to hide or disable the sidemenu on login page. I try to find any solution online but most of the solution is for ionic 4.

2

Which Ionic Version are you using?

3

Ionic CLI : 5.4.16 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 5.7.0
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 12.1.4
@angular/cli : 12.1.4
@ionic/angular-toolkit : 4.0.0

4

Normally the Ionic 4 Solutions works for Ionic 5 as well. Where exactly is the problem, what doesn’t work?

5

I see from this link and i using this code and paste on login.page.ts and still no results.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor() 
{ionViewWillEnter() {
 this.menuCtrl.enable(false);
}}

  ngOnInit() {
  }

}
6

Just remove the tag in html for the login page. No need to remove programmatically.

7

IonViewWillEnter does not belong in the constructor

Or is this wrong copy/paste?

1 Like
8

but the ion menu tag is written in app.component.html. so every page has the ion menu tag but i cant target that specific page to disable the ion menu tag

9

In angular one uses a service to support things happening across components.

Which in your case requires app component to be subscribing to these things happening with respect to that menu tag u r referring to

Services and observables are key here then

10

is it possible for the side menu html which is in the app component to disable for specific app pages?

Screenshot 2021-09-09 at 1.39.54 PM
Screenshot 2021-09-09 at 1.39.54 PM1904×553 50.4 KB

11

The short answer is yes and the clues are given before

I would make a menu service which tells the menu component what to show. Other pages can use that service to convey the message to app component (and or any other thing that likes to know)

Service architecture can be learnt from angular.io. Next u need to apprehend rxjs and using a BehaviorSubject to manage this state. Every other day this is mentioned on this forum in many other use cases.

At least how I would do this

There are many roads to happiness

12

this is the not the answer i was hoping for but thank for the suggestion anyway.

13

What were you hoping? Please share a bit what you were thinking?