How to add header/footer to all pages (automatically)?

Ionic Framework ionic-v3
1

Can a forum admin please add “ionic-v4” category to this forum?

I have seen numerous posts asking about this but most require adding the code to the .page.ts of every page. Coming from a web CMS world, this obviously seems ridiculous.

As a test, i have set up my app.componet.html like this:

[header code here] [tab code here]

And sure enough this works perfectly. However, i have then added a back button into my header and it does not work/show. I will eventually also be adding a hamburger slide-out menu to the header; would it be safe to assume that will not work either?

My guess would be certain ionic functionality does not work outside of the component. Is this correct?

Is there a proper way to have a common header/footer without having to duplicate code in dozens of places?

2

Will answer my own question (seems to be little support in this forum these days):

For dynamic header i created a custom component and add it everywhere.

For static footer, i simply added html to end of app.component.html

1 Like
3

Hi, do you have an example of app.component.html with static footer
I’ve tried with ionic 4 angular 8 but is not rendered on right position…
Thanks

4

Sorry, didn’t see this reply until now… at the end of my app.component.html i have this:


  <ion-tabs >
    <ion-tab-bar color="primary" slot="bottom">

      <ion-tab-button tab="start">
        <ion-icon name="home"></ion-icon>
        <ion-label>{{'Start' | translate}}</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="results" *ngIf="loggedIn">
        <ion-icon name="stats"></ion-icon>
        <ion-label>{{'Results' | translate}}</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="user/login" *ngIf="!loggedIn">
        <ion-icon name="log-in"></ion-icon>
        <ion-label>{{'Log in' | translate}}</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="{{faq}}">
        <ion-icon name="help-circle-outline"></ion-icon>
        <ion-label>{{'FAQ' | translate}}</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="contact">
        <ion-icon name="mail"></ion-icon>
        <ion-label>{{'Contact' | translate}}</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-app>