Hi team,
Description:
I have a weird behavior when I use a custom component to hold my ion-toolbar.
Example of my custom toolbar component:
<ion-toolbar>
<ion-buttons slot="start">
<!-- Slot content projection -->
<ng-content select="[start-button]"></ng-content>
</ion-buttons>
<ion-title>
Blank
</ion-title>
</ion-toolbar>
First page:
<ion-header>
<!-- Reusable component -->
<app-custom-toolbar></app-custom-toolbar>
</ion-header>
<ion-content>
Page 1
</ion-content>
Second page:
<ion-header>
<!-- 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>
</app-custom-toolbar>
</ion-header>
<ion-content>
Page 2
</ion-content>
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”
Observations:
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.