[ionic4] routed site behind header from app.component.ts

hi i postet my question in stackoverflow, anybody here can help me out?

Why do you want to add an <ion-header/> in app.component.ts?

i want to have a global header for the whole app… in ionic3 i had to make an header in each page/component… now with the angular router i thought it can be better

maybe creating a component, adding your ion-header in it and using the component in all your pages

I’m agree you would have to use the component multiple times, but that would be a unique header too

i think i tried this with ionic3, and it was not possible :frowning:
is this now better with ionic4? however, i tried this with pure angular2 a year ago, and it worked great without ionic to put the header in the app.component.ts

I didn’t tried but I guess it should work…would you like to give a quick try? would be interested to know the outcome

side note: note sure but if you create a component, I think the router module might be needed to be imported in the list of imported module of the component, just in case for the back button…

at the moment not, but i will give it a try in the holidays.
but well, this is not the solution i am looking for :wink:

1 Like

Make sure you are on the latest version of Ionic, as ion-tabs have had a couple of breaking changes since 4.0.0-beta.15

I was able to achieve a persistent header by adding <ion-header> no to the app-component template, but to the tabs template

<ion-header>
  <ion-toolbar>
    <ion-title>App Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-tabs>

</ion-tabs>

this puts the header above and in front of all the tabs and just needs some styling to adjust the top margin of the tabs:

ion-tabs {
    margin-top: 56px; // adjust based upon your needs, this is the material toolbar height i think
    max-height: calc(100vh - 56px); //reduce max height of tab views to adjust for the margin
}

Hope this helps!

1 Like

thanks for your answer.
i am using rc.0 :slight_smile:
but i dont use tabs… do i have to replace the ion-content with the ion-tabs?

oops, Wow, I’m not sure why I went with tabs.

I started a new side-menu template to test this out. Let me know if this works for you!

In app.component.html and added an ion-header that manually toggles the menu button on and off since its at a higher level than the ion menu itself:


<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button *ngIf="platform.width() < 992" autoHide="false"></ion-menu-button>
        </ion-buttons>
        <ion-title>App Title</ion-title>
    </ion-toolbar>
</ion-header>

between ion-app and ion-split-pane,
and removed the ion-header content from the ion-menu

then, in app.component.ts i added a styleUrl to the component decorator:

styleUrls: ['./app.component.scss']

then i create app.component.scss an added:

ion-menu {
    top: 56px !important;
    max-height: calc(100vh - 56px) !important;
}

then I removed the ion-header content from all the desired pages since I have the main 1 now
then i added the previous ion-menu styling, but to the ion-content tag on all the desired pages

thank you this is working for me :slight_smile: