Ion-toolbar in a custom component still visible when going to previous page

Hi team,

I have a weird behavior when I use a custom component to hold my ion-toolbar.

Example of my custom toolbar component:


  <ion-buttons slot="start">

    <!-- Slot content projection -->
    <ng-content select="[start-button]"></ng-content>




First page:

  <!-- Reusable component -->

  Page 1

Second page:

  <!-- Reusable component, this darkMode parameter is just to change the toolbar background and to see the issue clearly -->
  <app-custom-toolbar [darkMode]="true">
    <ion-back-button start-button></ion-back-button>

  Page 2

On iOS, when you go to another page, and then go back, the toolbar is still visible for at least 1-2 seconds.

Example on iOS:


On the other hand, Android does not have this issue:


Github repo demo:
click here

Project versions:

  • @ionic/angular”: “^6.1.10”
  • @angular/cli”: “^14.0.0”
  • @capacitor/cli”: “3.5.1”

The issue on iOS does not occur if I put the ion-toolbar within the same page. Maybe the ion-toolbar cannot go in a custom component?

As you noticed, I have used content projection in my custom component to project ion-back-button. This is a workaround because the back button sometimes is not present even with pages in the stack, there are a lot of threads talking about this too. Maybe, we have the same situation with ion-toolbar?

My goal is to have a reusable component to avoid duplicating the ion-toolbar code.

Any help or advice finding why this is happening and how can I fix it would be appreciated.

Hi guys,

Any help or advice on this would be awesome.