Reusable Component for ion-header (and footer) Ionic v4

Ionic Framework
1

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 <ion-header><header-component> 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.

6 Likes
2

hi, i am also facing same problem. Can anyone on this community help us on this question?