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

#1

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

#2

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

#3

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

#4

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

#5

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

#6

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

#7

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…

#8

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
#9

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
#10

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?

#11

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

#12

thank you this is working for me :slight_smile: