Add tabs and side menu globally

Ionic Framework
1

I am using the latest ionic 4.10.0. I want to create a template with tabs and side menu on every page.I made required changes elsewhere for menu to display.I formatted the app.component.html to look like this.


<ion-app>

<ion-split-pane>

<ion-menu>

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

<ion-tab-bar slot="bottom">

<ion-tab-button tab="tab1">

<ion-icon name="home"></ion-icon>

<ion-label>Home</ion-label>

</ion-tab-button>

<ion-tab-button tab="tab2">

<ion-icon name="mic"></ion-icon>

<ion-label>AskBot</ion-label>

</ion-tab-button>

</ion-tab-bar>

</ion-tabs>

</ion-app>

Either the menu works or tab works.Combination of both doesn’t work

1 Like