Trouble opening menu after navigation to second page

scharli · February 12, 2020, 5:38am

If i go to another page menu is not opening, i need to refresh the whole page for opening up the menu.
So someone has any idea why it’s happening?

sanjay100 · February 13, 2020, 10:33am

can you share the app.html and new page html code ?

scharli · February 13, 2020, 11:12am

app.component.html

<ion-menu side="start" type="overlay" class="left-menu">

  <ion-header class="head">

    <div class="enappd-header">

      <ion-avatar slot="start" class="profile" style="margin-right: auto;">

        <!-- <img src="../assets/pp.jpg">  -->

        <img [src]="imgSrc">

      </ion-avatar>

    </div>

  </ion-header>

  <ion-content class="app-back" scroll-y="true">

  

    <ion-list class="list-padd ion-no-margin ion-no-padding">

      <ion-list-header>

        <ion-label></ion-label>

      </ion-list-header>

      <div *ngFor="let p of beginner">

        <div *ngIf="p.children && !p.module">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div class="zero-h" [ngClass]="{'animate-expand': (showChildren == p.title)}">

            <ion-menu-toggle auto-hide="false" *ngFor="let option of p.children">

              <ion-item class="ion-padding-start" detail [ngClass]="{'disabled':option.disabled}"

                (click)="redirectPage(option.url, option.disabled)">

                <ion-icon slot="start" [name]="option.icon"></ion-icon>

                <ion-label>

                  {{ option.title }}

                </ion-label>

              </ion-item>

            </ion-menu-toggle>

          </div>

        </div>

        <div *ngIf="p.children && p.module=='sidemenu'">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div *ngIf="showChildren == p.title">

            <div class="option_menu-button" *ngFor="let option of p.children;let i = index">

              <ion-menu-button autoHide="false" menu="end">

                <ion-item (click)="showSidemenu(i)" class="ion-padding-start" [routerLink]="[option.url]" detail>

                  <ion-icon slot="start" [name]="option.icon"></ion-icon>

                  <ion-label>

                    {{ option.title }}

                  </ion-label>

                </ion-item>

              </ion-menu-button>

            </div>

          </div>

        </div>

        <div *ngIf="!p.children">

          <ion-menu-toggle auto-hide="false">

            <ion-item [routerLink]="[p.url]" detail>

              <ion-icon slot="start" [name]="p.icon"></ion-icon>

              <ion-label>

                {{ p.title }}

              </ion-label>

            </ion-item>

          </ion-menu-toggle>

        </div>

      </div>

      <ion-item detail (click)="logout()" class="ion-margin-top">

        <ion-icon slot="start" name="person"></ion-icon>

        <ion-label>

          Logout

        </ion-label>

      </ion-item>

    </ion-list>

    <ion-list class="list-padd ion-no-margin ion-no-padding">

      <ion-list-header>

        <ion-label></ion-label>

      </ion-list-header>

      <div *ngFor="let p of startup">

        <div *ngIf="p.children && !p.module">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div class="zero-h" [ngClass]="{'animate-expand': (showChildren == p.title)}">

            <ion-menu-toggle auto-hide="false" *ngFor="let option of p.children">

              <ion-item class="ion-padding-start" detail [ngClass]="{'disabled':option.disabled}"

                (click)="redirectPage(option.url, option.disabled)">

                <ion-icon slot="start" [name]="option.icon"></ion-icon>

                <ion-label>

                  {{ option.title }}

                </ion-label>

              </ion-item>

            </ion-menu-toggle>

          </div>

        </div>

        <div *ngIf="p.children && p.module=='sidemenu'">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div *ngIf="showChildren == p.title">

            <div class="option_menu-button" *ngFor="let option of p.children;let i = index">

              <ion-menu-button autoHide="false" menu="end">

                <ion-item (click)="showSidemenu(i)" class="ion-padding-start" [routerLink]="[option.url]" detail>

                  <ion-icon slot="start" [name]="option.icon"></ion-icon>

                  <ion-label>

                    {{ option.title }}

                  </ion-label>

                </ion-item>

              </ion-menu-button>

            </div>

          </div>

        </div>

        <div *ngIf="!p.children">

          <ion-menu-toggle auto-hide="false">

            <ion-item [routerLink]="[p.url]" detail>

              <ion-icon slot="start" [name]="p.icon"></ion-icon>

              <ion-label>

                {{ p.title }}

              </ion-label>

            </ion-item>

          </ion-menu-toggle>

        </div>

      </div>

    </ion-list>

    <ion-list class="list-padd ion-no-margin ion-no-padding">

      <ion-list-header>

        <ion-label></ion-label>

      </ion-list-header>

      <div *ngFor="let p of pro">

        <div *ngIf="p.children && !p.module">

          <ion-item detail (click)="expandMenu(p.title)">

            <ion-icon slot="start" [name]="p.icon"></ion-icon>

            <ion-label>

              {{ p.title }}

            </ion-label>

          </ion-item>

          <div *ngIf="showChildren == p.title">

            <ion-menu-toggle class="ion-menu-toggle" auto-hide="false" *ngFor="let option of p.children">

              <ion-item class="ion-padding-start" detail [ngClass]="{'disabled':option.disabled}"

                (click)="redirectPage(option.url, option.disabled)">

                <ion-icon slot="start" [name]="option.icon"></ion-icon>

                <ion-label class="menu-label">

                  {{ option.title }} <ion-icon *ngIf="option.device" name="phone-portrait" color="primary">

                  </ion-icon>

                  <ion-icon *ngIf="option.apple" name="logo-apple" color="primary"></ion-icon>

                </ion-label>

              </ion-item>

            </ion-menu-toggle>

          </div>

        </div>

        

        <div *ngIf="!p.children">

          <div auto-hide="false">

            <ion-item detail [routerLink]="[p.url]">

              <ion-icon slot="start" [name]="p.icon"></ion-icon>

              <ion-label>

                {{ p.title }}

              </ion-label>

            </ion-item>

          </div>

        </div>

      </div>

    </ion-list>


  </ion-content>

</ion-menu>

Newpage.html

<ion-buttons slot="start">

  <ion-menu-button autoHide='false'></ion-menu-button>

</ion-buttons>

<ion-title>Legal</ion-title>

<ion-row style="padding-right:10px; padding-left:10px;">

  <ion-col>

    <p class="ion-text-justify">

      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's

      standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to

      make a type specimen book. It has survived not only five centuries, but also the leap into electronic

      typesetting, remaining essentially unchanged.

    </p>

    <p class="ion-text-justify">

      Lorem Ipsum is simply dummy text of the printing and typesetting industry.

      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

      when an unknown printer took a galley of type and scrambled it to make a type

      specimen book.

    </p>

    <p class="ion-text-justify">

      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in

      some form, by injected humour, or randomised words which don't look even slightly believable. If you are going

      to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of

      text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making

      this the first true generator on the Internet.

    </p>

  </ion-col>

</ion-row>

sanjay100 · February 13, 2020, 11:24am

> 1. <ion-header>
> 2.   <ion-toolbar>
> 3.     <ion-buttons slot="start">
> 4.       <ion-menu-button></ion-menu-button>
> 5.     </ion-buttons>
> 6.      <ion-title class="one"><img src="../assets/img/header.png" style="width:180px" /></ion-title>
> 7.   </ion-toolbar>
> 8. </ion-header>
> 9. <ion-content >
>  here go your newpage.html code
> 10. </ion-content>

scharli · February 13, 2020, 11:33am

Its does not solve my problem

sanjay100 · February 13, 2020, 11:36am

is any error shows in console of browser when you click on sidemenu button?

scharli · February 13, 2020, 11:43am

No.
i’ll explain you in detail when running my app it will open home page if i click on helpcenter named page it will redirect me correctly but if i go to login page it will redirect me there but after login or if i go back wihtout loggedin to application after that menu is not opening for that i need to refresh the whole application than only it will open

sanjay100 · February 13, 2020, 11:57am

you can cross check with helpcenter page as wel but can you share me login.ts code so i can help you.

scharli · February 13, 2020, 12:01pm

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

import { MenuController, Platform, AlertController } from ‘@ionic/angular’;

import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;

import { UtilService } from ‘…/…/services/util/util.service’;

import { AuthenticationService } from ‘…/…/services/firestore/firebase-authentication.service’;

import { IfStmt } from ‘@angular/compiler’;

import { LoadingController } from ‘@ionic/angular’;

import { AuthService } from ‘src/app/services/auth/auth.service’;

import { HttpErrorResponse, HttpClient } from ‘@angular/common/http’;

import { Router } from ‘@angular/router’;

import { User } from ‘…/…/models/auth.model’;

import { GooglePlus } from ‘@ionic-native/google-plus/ngx’;

@Component({

selector: ‘app-login’,

templateUrl: ‘./login.page.html’,

styleUrls: [’./login.page.scss’],

})

export class LoginPage implements OnInit {

emailPattern = “^[a-z0-9._%±]+@[a-z0-9.-]+.[a-z]{2,4}$”;

isLoginError: boolean = false;

user: User;

googleuser: any = {};

constructor(private googlePlus: GooglePlus, private http: HttpClient, private authservice: AuthService,

          private router: Router, private platform: Platform, public loadingController: LoadingController,

          public alertController: AlertController, private splashScreen: SplashScreen, public util: UtilService, 

          private menuCtrl: MenuController, private authServ: AuthenticationService) {

}

ngOnInit() {

}

async presentAlert() {

const alert = await this.alertController.create({

  header: 'Alert',

  subHeader: 'Email or Password is incorrect!!',

  message: 'Pls Enter Valid Email/Password',

  buttons: ['OK']

});

await alert.present();

}

ionViewDidEnter() {

this.menuCtrl.enable(false, 'start');

this.menuCtrl.enable(false, 'end');

this.platform.ready().then(() => {

  this.splashScreen.hide();

});

}

OnSubmit(UserName, Password) {

this.authservice.userAuthentication(UserName, Password).subscribe((data: any) => {      console.log("User login successfully");      

  localStorage.setItem('userToken', data.access_token);

  this.router.navigate(['home']);

  /*console.log("Login Page Token: ",data.access_token);*/      /*console.log("Login Page Token1:",data.accessToken);*/

},

  (err: HttpErrorResponse) => {

    this.presentAlert();        /*this.isLoginError = true;*/

  })

}

googlelogin() {

console.log("GPBC");

this.googlePlus.login({}).then(res => {

  this.googleuser = res;

  this.GoogleGetData();

  this.router.navigate(['home']);

}).catch(err => console.error(err));

}

async GoogleGetData() {

let token = this.googleuser.accessToken;

this.http.get('https://www.googleapis.com/plus/v1/people/me?access_token=' + this.googleuser.accessToken).subscribe((data: any) => {

  this.googleuser.name = data.displayName;

  this.googleuser.image = data.image.url;

  localStorage.setItem('userToken', data.accessToken);

  this.router.navigate(['home']);

})

}

sanjay100 · February 13, 2020, 12:09pm

after successfully login use navigateByUrl instead navigate

this.router.navigateByUrl(’/home’);

scharli · February 13, 2020, 12:14pm

is this solve my menu problem?

sanjay100 · February 13, 2020, 12:17pm

i have used in my application navigation working fine. try to use this may be solved your menu problem

scharli · February 13, 2020, 12:26pm

i tried it but still menu is not opening…

Ankitvafdr · September 24, 2020, 4:27pm

Same problem here. any solution?

bhandaribhuminpfizer · February 22, 2021, 12:04pm

any update from ionic team?

floifyed · March 31, 2021, 4:04pm

Not sure how helpful this will be to anyone on Angular, but I have a React app and was experiencing this issue. I found that after I would navigate away from the page, then click ‘back’ the menu would be disabled.

I have an on click event that is a promise which enables the menu first, THEN opens it:

menuController.enable(true).then(() => {
      menuController.open();
    });

I still notice a little issue if I quickly navigate and click the menu, so not sure what is happening there. It opens briefly and then closes quickly.

Topic		Replies	Views
I have issue in opening menu after successfully logged in Ionic Angular	1	1544	September 24, 2020
Trouble opening ionic menu when navigating from another page ionic-v3	1	434	September 5, 2017
Trouble opening menu when navigating pages ionic-v3	1	391	September 6, 2017
Ionic Menu Component wont open on menu-button click Ionic Angular	0	2114	July 11, 2020
Web app with a menu inside a menu Ionic Angular	4	1830	February 19, 2021

Trouble opening menu after navigation to second page

Related topics