Dynamically Adding ion-menu in app.component.html

I am just getting started with ionic-4 and wanted to know how could I generate the code needed for ion-menu and insert it into app.component.html through a service or ts file.


You could do something like :

Import your service “myService” in app.component.ts

in your app.component.html :

    <ion-menu *ngIf="myService.appPages.length > 0">
          <ion-menu-toggle auto-hide="false" *ngFor="let p of myService.appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
    <ion-router-outlet main></ion-router-outlet>

Then you put data in the appPages of “myService” when you want like :

public loadMenu() {
    this.appPages = [
      title: 'Home',
      url: '/home',
      icon: 'home'
        title: 'messaging',
        url: '/messaging',
        icon: 'home'

If you always have items in menu you can remove the “*ngIf=…” on the ion-menu

1 Like