Hi,
You could do something like :
Import your service “myService” in app.component.ts
in your app.component.html :
<ion-app>
<ion-split-pane>
<ion-menu *ngIf="myService.appPages.length > 0">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<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-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
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