I have issue in opening menu after successfully logged in

scharli · February 28, 2020, 5:03am

Here is my app.component.html code

<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>

<ion-router-outlet main></ion-router-outlet>

Here is my app.component.ts code

import { Component, ViewChildren,QueryList, OnDestroy } from ‘@angular/core’;

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

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

import { StatusBar } from ‘@ionic-native/status-bar/ngx’;

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

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

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

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

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

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

import { Plugins } from ‘@capacitor/core’;

const { Toast } = Plugins;

@Component({

selector: ‘app-root’,

templateUrl: ‘app.component.html’,

styleUrls: [‘app.component.scss’]

})

export class AppComponent implements OnDestroy {

sidemenu = 1;

showChildren = ‘’;

backButtonSubscription;

@ViewChildren(IonRouterOutlet) routerOutlets: QueryList;

lastTimeBackPress = 0;

timePeriodToExit = 2000;

public beginner = [

{

  title: 'Home',

  url: '/home',

  icon: 'home'

},

{

  title: 'Profile',

  url: '/profile',

  icon: 'person'

},

{

  title: 'Wallet',

  url: '/wallet',

  icon: 'wallet'

},

{

  title: 'Notification',

  url: '',

  icon: 'notifications'

},

{

  title: 'Help Center',

  url: '/helpcenter',

  icon: 'help-circle'

},

{

  title: 'Legal',

  url: '/legal',

  icon: 'today'

},

{

  title: 'Refer a Friend',

  url: '',

  icon: 'contacts'

},

/* {

  title: 'Video',

  url: '/video',

  icon: ''

}, */

];

public startup = [

];

public pro = [

];

imgSrc: string;

selectedImage: any = null;

isSubmitted: boolean;

isUpdateDateError : boolean = false;

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

user: User;

em: any;

fnm: any;

lnm: any;

mob: any;

gn: any;

constructor(

private authservices: AuthService,

private authService: AuthenticationService,

 private util: UtilService,

  private route: Router,

   private platform: Platform,

 private splashScreen: SplashScreen,

  private statusBar: StatusBar,

   public modalCtrl: ModalController,

   private menuCtrl: MenuController,

   

   public alertController: AlertController,

   public router: Router,

   ) 

{

this.initializeApp();

}

ngOnInit() {

this.authservices.getUserClaims().subscribe((res: any) => {      

this.em = res.Email;

this.fnm = res.FirstName;

this.lnm = res.LastName;

this.gn = res.Gender;

this.mob = res.MobileNo;

this.imgSrc = res.Profile_Path;

});

}

logout() {

console.log('logout item');

this.authService.logout().then(() => {

  this.util.navigate('login', false);

})

}

initializeApp() {

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

  this.statusBar.styleDefault();

  // this.splashScreen.hide();

  this.backButtonEvent();

  this.splashScreen.hide();

});

}

backButtonEvent() {

this.backButtonSubscription = this.platform.backButton.subscribe(async () => {

  this.routerOutlets.forEach((outlet: IonRouterOutlet) => {

    if (outlet && outlet.canGoBack()) {

      outlet.pop();

    } else if (this.router.url === "/home") {

      // this.presentAlertConfirm();

      if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {

        navigator['app'].exitApp();

      } else {

        this.showToast('Press back again to exit App.');

        this.lastTimeBackPress = new Date().getTime();

      }

    }

  });

});

}

async showToast(msg) {

await Toast.show({

  text: msg

});

}

async presentAlertConfirm() {

const alert = await this.alertController.create({

  header: 'Confirm!',

  message: 'Confirm to Exit App !!!',

  buttons: [

    {

      text: 'Cancel',

      role: 'cancel',

      cssClass: 'secondary',

      handler: (blah) => {

        console.log('Confirm Cancel: blah');

      }

    }, {

      text: 'Exit',

      handler: () => {

        console.log('Confirm Okay');

        navigator["app"].exitApp();

      }

    }

  ]

});

await alert.present();

}

//Called when view is left

ngOnDestroy() {

// Unregister the custom back button action for this page

this.backButtonSubscription.unsubscribe();

}

showSidemenu(index) {

this.sidemenu = index + 1;

}

expandMenu(title) {

if (this.showChildren === title) {

  this.showChildren = '';

} else {

  this.showChildren = title;

}

}

async redirectPage(pageUrl, disabled) {

if (disabled) {

  return

}

if (pageUrl === '/logout') {

  this.logout();

} else if (pageUrl === '/product-details') {

  this.route.navigate([pageUrl, { id: 65 }]);

} else {

  this.route.navigate([pageUrl])

}

}

async proRedirect(pageUrl) {

this.route.navigate([pageUrl])

this.menuCtrl.toggle();

}

Please someone help i have been trying different types of codes for menu but nothing resolve my menu error
It’s not opening after log in if i refresh browser it’ll work perfectly.

cslegany · September 24, 2020, 1:05pm

It is caused by the following lines in login.component.ts:
ionViewDidEnter() {
this.menuCtrl.enable(false, ‘start’);
this.menuCtrl.enable(false, ‘end’);
}

Solution: enable these menus in pages/home.component.ts using:
ionViewDidEnter() {
this.menuCtrl.enable(true, ‘start’);
this.menuCtrl.enable(true, ‘end’);
}

You can also add autoHide to pages/home.component.ts as:

Topic		Replies	Views
Trouble opening menu after navigation to second page Ionic Angular	15	3945	March 31, 2021
Ionic Menu Component wont open on menu-button click Ionic Angular	0	2114	July 11, 2020
Trouble opening ionic menu when navigating from another page ionic-v3	1	434	September 5, 2017
Ion-menu does not appear Ionic Native	0	569	August 4, 2019
Web app with a menu inside a menu Ionic Angular	4	1830	February 19, 2021

I have issue in opening menu after successfully logged in

Related topics