Click here to Skip to main content
15,867,594 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have created menu using ionic 4 it will work fine, but when i logged in to my application or website it will not opening up, for opening it i need to refresh the whole browser. May be it's CORS issue but i can not disable CORS as my all the data comes from ASP.net webapi so what should i do to resole this error.?
******************************************************************************************
My app.componenet.html code

<ion-app>
  <ion-split-pane>
    <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>
  </ion-split-pane>
</ion-app>


****************************************************************************************
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<IonRouterOutlet>;

  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 give me solution for the same.
Thanks in advance.!

What I have tried:

I have tried different codes for menu but nothing worked.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900