my ionic 5 app has a side menu and tabs. Each page can have different contents for the side menu and the tabs. I don't want to be duplicating the ion-menu in each page so I created a header component like so (I also do one for the tabs):
HEADER COMPONENT:
<ion-menu contentId="content">
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>{{pageObj.title}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let page of pageObj.pages">
<ion-item [routerLink]="page.url" routerDirection="root" [class.active-item]="selectedPath.startWith(page.url)">
<ion-icon>{{page.icon}}</ion-icon>
<ion-label>
{{page.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
Now I use this header component in app.component.html like so:
<ion-app>
<ion-split-pane>
<app-header></app-header>
<ion-router-outlet id="content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
And app.component.ts:
...........
.........
export class AppComponent {
pageObj: any = '';
selectedPath = '';
pages = [
{
title: 'Become a Member',
url: '/pages/membership'
},
{
title: 'Make a Posts',
url: '/pages/posts'
}
]
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private router: Router
) {
this.initializeApp();
this.pageObj.title = 'Menu';
this.pageObj.pages = this.pages;
this.router.events.subscribe((event:RouterEvent) => {
if (event && event.url) {
this.selectedPath = event.url;
}
})
}
.........
........
So the problem is requires variables (pageObg) that exist in app.component.ts. I am not sure how to pass those variables? I believe I can do something like this:
<app-header [pageObj]="pageObj"><app-header>
but I am not sure how this works! Is there a better way to achieve what I am trying to do?