I am re posting the same question as below. Looking forward for the right answer.
This is for Ionic v4, although I think it can apply to Ionic v3 as well.
From what I can tell, the recommendation / requirement is that ion-header has to be at the same level as ion-content. Also, ion-toolbar needs to be a child (direct descendant) of ion-header, and things like ion-button and ion-title that use slots also need to be children of ion-toolbar.
> This seems prevents you from creating a reusable component for ion-header.
I have many pages that have more or less the same somewhat complex header. For example:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button
*ngIf="shouldShowBackButton"
class="back-arrow"
(click)="goBack()"
text="" icon="arrow-round-back" defaultHref="/">
</ion-back-button>
<ng-content select="[header-buttons]">
</ng-content>
</ion-buttons>
<ion-title class="header-title" text-center>
<ng-content></ng-content>
</ion-title>
</ion-toolbar>
</ion-header>
If I create this as its own component template it creates all kinds of issues with the header showing during navigation, among other things. Also even if I do something like this also doesn’t work since it seems like ion-toolbar needs to be a child of ion-header.
Is there any way to create a reusable component for the Ionic structural components such as the header and footer? Otherwise I’ll more or less have to copy this on many of my pages.