@scharli wrote:
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.
Posts: 1
Participants: 1