Ionic 2 re-usable page component

Question

I'm trying to figure out how I can create a reusable page component but ionic has a mess of transclusion bugs.

I've tried to make a page-list-base:

<ion-header *ngIf="header || hasHeader">
    <ion-navbar>
        <ng-container  *ngTemplateOutlet="header"></ng-container>
    </ion-navbar>
</ion-header>
<ion-content>
   <!-- TODO: abstract refresher once it can be put in a component without ion content -->
   <ion-refresher (ionRefresh)="pageListBase.refresh($event)">
     <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh"
                          refreshingSpinner="circles" refreshingText="Refreshing...">
     </ion-refresher-content>
   </ion-refresher>
   <list-base #pageListBase [filter]="filter" 
                            [baseProvider]="baseProvider" 
                            [config]="config" 
                            [template]="itemTemplate">
   </list-base>
   <ion-footer *ngIf="footer">
       <ng-container *ngTemplateOutlet="footer"></ng-container>    
   </ion-footer>
 </ion-content>

I reuse this page here:

<page-base [header]="headerTemplate"></page-base>

<ng-template #headerTemplate>
  <ion-header>
    <ion-navbar align-title="center">
      <ion-buttons start>
          <button ion-button>Save</button>
      </ion-buttons>
      <ion-searchbar></ion-searchbar>
    </ion-navbar>
  </ion-header>
</ng-template>

and also here:

<page-base #pageBase [header]="headerTemplate"></page-base>

<ng-template #headerTemplate>
  <ion-header>
    <ion-navbar align-title="center">
      <ion-buttons start>
        <button ion-button>button</button>
      </ion-buttons>
      <ion-title start>
          Back Button is hidden behind the header
      </ion-title>
    </ion-navbar>
  </ion-header>
</ng-template>

I've made a repo to express the problem Here

Reproduce: Click on a profile picture avatar,

Bug: Header Template Appears but the back button is bound to the parent header.

Attempts to fix

1.If you remove the Ion-Header from the outside it creates Margin Bug.

2.If you remove the Ion-Header from the inside, the styles of ion-buttons changes

I'd prefer not to use a rabbit-hole of css fixes. How can I create a reusable ionic page component without breaking ionic's layout or functionality?

Answer 1

The problem seems to me that you are actually rendering <ion-header> and <ion-navbar> twice: you have them in the page-base template where the ng-container includes another pair of <ion-header> and <ion-navbar>.

So, what I did and worked perfectly:

page-base.html:

change:

<ion-header>
  <ion-navbar align-title="center">
    <ng-container *ngTemplateOutlet="header"></ng-container>
  </ion-navbar>
</ion-header>

to:

<ng-container *ngTemplateOutlet="header"></ng-container>