How dynamically load content into <ion-menu>?


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:

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>
      <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>


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

Here is my solution:

-> call api and subscribe
-> public event with tag and data

-> 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.


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