How to call or use the ion-menu in a component other than the app.compone.ts

Ionic Framework Ionic Angular
#1

I am creating an application with a welcome page, login and home.
I want to show data in the ion-menu, and this is obtained from the native storage and the native storage is filled using the login.

when starting the app, the ion-menu starts; then the ion-menu begins to obtain the data from the native storage but it will not acquire anything, since the user has not gone through the login and when the user logs in and opens the ion-menu, it loads strange data.

I would like to be able to initialize the ion-menu after the login so that it is possible to get the data correctly from the native storage.

  • app.component.htm
<ion-app>
  <app-menu></app-menu>
  <ion-router-outlet id="main"></ion-router-outlet>
</ion-app>
  • menu.component.ts
async ngOnInit() {
    console.log('starts with the app');
    this.name = await this.storage.get('name');
    this.email = await this.storage.get('email');
  }
  • menu.component.html
<ion-menu side="start" type="push" menuId="principalMenu" contentId="main">
  <ion-header>
    <ion-toolbar id="headerMenu">
      <ion-avatar id="avatarProfile">
        <img src="https://www.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png">
      </ion-avatar>
      <ion-label id="textProfile">
        <h3 id="nameProfile">{{ this.name}}</h3>
        <p id="emailProfile">{{ this.email}}</p>
      </ion-label>
    </ion-toolbar>
  </ion-header>
  <ion-content>
  </ion-content>
</ion-menu>
#2

How about disabling the Menu and Slide Gesture until User logged in?

1 Like
#3

Although you disabled the ion-menu, it continues to initialize when opening the app.
I managed to solve this problem using an event that has the ion-menu, in which I call a method to reset the data. the event is called ionWillOpen.

I share the code where I use it

  • menu.component.html
<ion-menu side="start" type="push" menuId="principalMenu" contentId="main" (ionWillOpen)="setUserLoggedIn()">
  <ion-header>
    <ion-toolbar id="headerMenu">
      <ion-avatar id="avatarProfile">
        <img src="https://www.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png">
      </ion-avatar>
      <ion-label id="textProfile">
        <h3 id="nameProfile">{{ this.name}}</h3>
        <p id="emailProfile">{{ this.email}}</p>
      </ion-label>
    </ion-toolbar>
  </ion-header>
  <ion-content>
  </ion-content>
</ion-menu>
  • menu.component.ts
async setUserLoggedIn() {
    this.name = await this.storage.get('name ');
    this.email = await this.storage.get('email ');
  }