Ionic - iPhone X statusbar overlays shared header component - ios

Question

I have seen various similar posts with the problem of the iOS status bar overlaying onto the header of apps.
I haven’t yet seen another post which has the same problem as mine.
I am trying to use a shared header component for certain pages and when I use this, I get the overlaying problem.
I have simplified the code and recreated my problem using the ionic tabs starter template:
This page is using a shared header component:
<ion-header>
<shared-header title="Home - shared header"></shared-header>
</ion-header>
shared-header.component.html
<ion-navbar>
<ion-title>{{title}}</ion-title>
</ion-navbar>
shared-header.component.ts
import { Component, Input } from '#angular/core';
#Component({
selector: 'shared-header',
templateUrl: 'shared-header.component.html'
})
export class SharedHeaderComponent {
#Input('title') title: string;
constructor() { }
}
This page is not using the shared header component:
<ion-header>
<ion-navbar>
<ion-title>
About
</ion-title>
</ion-navbar>
</ion-header>
Why would this be happening? Is it because of the extra <shared-header></shared-header> tags? If so, what can be done to solve this?

Answer 1

The problem is caused by having the component tag inside the header tag, for some reason this causes the header to render incorrectly. The solution I used was to use an attribute in the header instead of the component tags.
Inside the component wrap the selector in square brackets to define it be able to use it as an attribute
shared-header.component.ts
import { Component, Input } from '#angular/core';
#Component({
selector: '[shared-header]',
templateUrl: 'shared-header.component.html'
})
export class SharedHeaderComponent {
#Input('title') title: string;
constructor() { }
}
then in the header you can inject the component as an attribute like this
<ion-header shared-header title="Home - shared header">
</ion-header>
If you want to have access to your component via tags as well as an attribute, you can define multiple selectors
#Component({
selector:'[shared-header], shared-header',
templateUrl: 'shared-header.component.html'
})

Answer 2

You can try these below steps
1) Using statusbar cordova plugin, you can set
if (this.statusBar) {
this.statusBar.styleDefault();
this.statusBar.overlaysWebView(false);
}
2) In index.html, meta tag include 'viewport-fit=cover'
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/>
Can you also try adding padding-top to the header classes
header {
/* ... */
/* Status bar height on iOS 10 */
padding-top: 0px;
/* Status bar height on iOS 11.0 */
padding-top: constant(safe-area-inset-top);
/* Status bar height on iOS 11+ */
padding-top: env(safe-area-inset-top);
}