At the moment I’ve a bug where a child component that is inside the ion-header does not move with the page when the navigation animation is active. It sticks to the same place when leaving and then after the animation disappears.
I added the component to the header beacease. I want it to be sticky when scrolling, just like the ion-toolbar & ion-searchbar. Sadly I’m not able to share the application. But I can share some code with you.
header-component html
<div class="current-path-header">
<p>This should disappear</p>
</div>
select-page.html
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>{{'Select project' | translate}}</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-searchbar #searchbar [placeholder]="'Search in your projects' | translate"></ion-searchbar>
</ion-toolbar>
<app-project-header-bar *ngIf="projectPath.length > 0" (back)="back()" [projects]="projectPath" [loading]="state === 'loading'"></app-project-header-bar>
</ion-header>
<ion-content>
... ion list iwith items
</ion-content>
Maybe put it in the toolbar. I can imagine the frustration, but ionic elements behave differently (or treat elements differently) based on their host component
While maybe not desirable, it may probe a point about where and how to put it.
app-project-header-bar should be inside of an ion-toolbar in order for it to take part in the page transition.
Yes, but the problem is that I need a multi-line text element for the project path. I want that in a component because I reuse it on three different locations.
I’ve tried to wrap it around a ion-toolbar. But the element are still static on the position and I can’t use ion-title because of the multi-line text, ion-text does not move with the element and has a fade out effect and ion-button does not cover the full height.
project-header-bar.html
<div class="current-path-header">
<ion-grid>
<ion-row>
<ion-col class="path-text" size="10">
<div>
<span *ngFor="let project of projects; let i = index">{{project.name}}<span *ngIf="i !== projects.length - 1"> > </span></span>
</div>
</ion-col>
<ion-col class="path-back-button" size="2">
<ion-button mode="ios" color="primary" icon-only="true" expand="full" (click)="goBack()">
<ion-icon name="arrow-back"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<ion-progress-bar *ngIf="loading" type="indeterminate"></ion-progress-bar>
</div>
and here I have one page that use the header
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>{{'Select project' | translate}}</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-searchbar #searchbar [placeholder]="'Search in your projects' | translate"></ion-searchbar>
</ion-toolbar>
<ion-toolbar>
<app-project-header-bar *ngIf="projectPath.length > 0" (back)="back()" [projects]="projectPath" [loading]="state === 'loading'"></app-project-header-bar>
</ion-toolbar>
</ion-header>
