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-toolbar needs to be a child (direct descendant) of
ion-header, and things like
ion-title that use
slots also need to be children of
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
<ion-header><header-component> this also doesn’t work since it seems like
ion-toolbar needs to be a child of
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.