Directive for header

Ionic Framework ionic-v3
#1

Hi I want to create a directive for the header similar to the following code. This code works fine if used directly in a template:

<ion-header>
  <ion-navbar>
    <div *ngIf="isProfilePage">
      <ion-title>{{ pageId | translate }}</ion-title>
      <ion-buttons start>
        <button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
      </ion-buttons>
      <ion-buttons end>
        <button (click)="showProfile()">
          <ion-icon name="person" class="icon-profile"></ion-icon>
        </button>
      </ion-buttons>
    </div>
    <div *ngIf="!isProfilePage">
      <ion-header>
        <ion-navbar>
          <button menuToggle>
            <ion-icon name="menu"></ion-icon>
          </button>
          <ion-title>{{ pageId | translate }}</ion-title>
        </ion-navbar>
      </ion-header>
    </div>
  </ion-navbar>
</ion-header>

But I do not want to write the same code over and over again for each template, so I decided to create a directive / component.
The component imports the following sub-directives: directives: [Button, Menu, Toolbar, Icon] but still it does not work. the ion-buttons tag is only rendered when not used via the directive.