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.