[Ionic v4] ion-back-button not working inside custom header component/directive


#1

To avoid biolerplate code in every page, we’ve created a custom angular component that prints de header and takes as parameter the page title.

This way, we don’t have to write the whole ion-header code inside each page component:

<ion-header>
    <ion-toolbar no-border-top>
        <ion-buttons slot="start">
            <ion-back-button no-margin no-padding></ion-back-button>
            <ion-icon size="large" src="assets/svg/logo.svg"></ion-icon>
        </ion-buttons>
        <ion-title>{{title | translate}}</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
   ...
</ion-content>

Instead, we write this line:

<custom-header title="{{title | translate}}"></custom-header>
<ion-content>
   ...
</ion-content>

The problem is that ion-back-button doesn’t show up when it is used inside a component. ¿Has anyone experienced this problem?

I have also tried it creating a customHeader directive that renders all the inner elements inside an ion-header:

<ion-header customHeader="{{title | translate}}"></ion-header>
<ion-content>
   ...
</ion-content>

In this case, the ion-back-button shows up (when it has to), but if you tap on it, it does nothing. It doens’t trigger a back navigation.

I might be missing some drawbacks, but usually, the header behaviour in an app tends to be quite similar in all the pages. I think that encapsulating the header in a component is a really common solution and ion-back-button should also work in these circunstances.