(solved) How to create a reusable navigation bar with ion-toolbar?

Ionic Framework Ionic Angular
1

I am trying to write my own, reusable navigation bar component. I have already accepted that I cannot nest <ion-header> in its own component (corresponding issue). However even if I make a construct like below, the <ion-toolbar> does not animate correctly: the header is not animated at all, instead the old header shows until the animation is complete and then changes abruptly. I think the cause for this lies somewhere in ios-transition.ts, especially selectors like this (note the child / direct descendant combinator >):

const enteringToolBarEls = enteringEl.querySelectorAll(':scope > ion-header > ion-toolbar');

<!-- my-page.page.html --> 
<ion-header>
    <app-nav-bar>My awesome page</app-nav-bar>
</ion-header>
<ion-content>
   Awesome content here
</ion-content>

<!-- nav-bar.component.html -->
<ion-toolbar>
    <ion-buttons>
        <ion-back-button slot="start"></ion-back-button>
    </ion-buttons>
    <ion-title><ng-content></ng-content>
</ion-toolbar>

What is the recommended way to create a reusable navigation bar? Or is the only solution really to copy-paste my <ion-toolbar> markup on every single page and update it everywhere whenever I change something? I cannot imagine that being the case.

Thank you for any insight or tips.

2

I have solved this. The wrapper component needs to have display: block on it for this to work. So, in the wrapper-component’s scss file I have added this:

:host {
  display: block;
}
1 Like