i am using the latest version of ionic4(rc0) and i am trying to create my <ion-header>
in the app.component.ts in root.
<ion-app>
<ion-header>
<ion-toolbar color="primary">
<ion-title>
<img src="assets/atippr_logo.svg" class="atippr-header"/>
</ion-title>
</ion-toolbar>
</ion-header>
<ion-menu side="start">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item ion-item menuClose="start" href="/dashboard">
<ion-icon name="apps" item-left></ion-icon>
Dashboard
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>
and later i want to set my <ion-content>
in my routed page.
<ion-content>
Login
</ion-content>
but now the content of my page always overlaps with the header from app.component.ts when i remember correctly in ionic3 there was a tag addition hasHeader="true" but without effect.
anybody can help me out?
Don't know if it still relevant but I had the same issue and found this structure to solve it:
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-router-outlet >
</ion-router-outlet>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-app>
Also don't forget to open a new (with/without padding) in you components html