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.