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

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-buttons slot="start">
        text="" icon="arrow-round-back" defaultHref="/">
      <ng-content select="[header-buttons]">
    <ion-title class="header-title" text-center>

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.


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