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

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.

2 Likes

I came here with the same problem so I post the workaround that works for me.

ion-header and ion-back-button needs to be on page component so I create custom component that works within ion-header and import ion-back-button as external component.

This is the customHeader template:

<ion-toolbar mode="ios">
  <ion-buttons slot="start">
    <ng-content></ng-content>
  </ion-buttons>
  <ion-title>
    <ion-icon [name]="icon"></ion-icon>
    {{title}}
  </ion-title>
</ion-toolbar>

and this is the declaration inside the page:

<ion-header>
  <page-header icon="map" title="Map page">
    <ion-back-button></ion-back-button>
  </page-header>
</ion-header>

This is the only way I found it working.

9 Likes

Nice Technique. Working for Me

Thank you… I had this same problem

The ion-header must be part of the page and not of the custom component, this solve the problem.

I figured out how to show the back button in a similar situation (wanted to share a common layout among all page components, called <app-layout>). Being the following the rendered result:

...
<ion-router-outlet>
  <app-current-page class="can-go-back">
    <app-layout>
      <ion-header>...</ion-header>
      <ion-content>...</ion-content>
    </app-layout>
  </app-current-page>
</ion-router-outlet>
...

what did the trick for me (besides adding class ‘ion-page’ to <app-layout> which was another problem), was creating a new global css rule for the back button to show up:

.can-go-back>app-layout ion-header ion-back-button {
  display: block;
}

I’m using Ionic 5 with Angular 9.