How dynamically load content into <ion-menu>?

Ionic Framework ionic-v3
1

I am experimenting with multiple <ion-menu> to achieve that I put two ion-menu in app.html and added so static contents and its working smooth.

My application scenario is
Login > Home (Here are 2 ion-menu i.e. left and right)

Both menus Added in app.html & app.component.ts

Left menu just have static contents;
But right is only available on Home Page and its contents have to be populated dynamically by calling api from provider, based on token. I need help you achieve this? and how can I achieve click events in home.ts?

Attached screenshot which shows the right ion-menu with static contents but I want to populate them dynamically:

image
image.jpg396×551 18.2 KB

static code snippet (just in case):

<ion-menu [content]="content" type="push" side="right" id="accounts-menu">
  <ion-content style="background-color: #2B3541;">
    <ion-list no-lines="">
      <ion-list-header style="background-color: #35414f; color: #b6c1cf; min-height: 56px; margin-bottom: 0;">
        <small>SWITCH ACCOUNT</small>
      </ion-list-header>
      <button ion-item style="background-color: transparent;">
        <ion-icon name="ios-radio-button-on" color="light" style="font-size: 16px"></ion-icon>
        <span ion-text color="light" style="margin-left: 5px">Umair</span>
      </button>
      ...
    </ion-list>
  </ion-content>
</ion-menu>
2

I got it with events trick, it was not that difficult

Here is my solution:

home.ts
-> call api and subscribe
-> public event with tag and data

app.component.ts
-> subscribe to the event (name should be same as given in home.ts)
-> call *ngFor on received data
-> Magic!

I am leaving this question open, with hope to get best solution.

3

Can you please provide me the code…i am trying to display the menu items depending on the role of the user…

will be much helpful if u provide with app.component.ts code, home.ts code and service code also…

Thank you