Ionic2 same header for all pages

Question

I would like to have the same header for all pages.

Whats the best way to do it without having to repeat the html + code in all pages.

Thanks!

Answer 1

I found an easier way, with no need to repeat code at all! although it is not so straightforward it covered my needs:

Just place the ion-header component inside the app component together with the ion-nav component.

Change your app component template to this:

<ion-header>
  <ion-title>{{appTitle}}</ion-title>
</ion-header>
<ion-nav [root]="rootPage"></ion-nav>

and in your app.scss add some styling to make the page appear under the header:

.ion-page > ion-content
{
   top: 52px;//your headers height
}

This should show your header in all pages.

Notice that this isn't recommended:

Having a different header for each page is a design decision we've made. In Ionic 1, a common issue was that having a single header/navbar wasn't flexible enough for people.

Taken from ionic forum

Answer 2

You can do this by making header-component with configuration and then change configuration on different components accordingly. Create custom header component.
Lets Call it 'custom-header-component'

custom-header-component.html

<ion-navbar>
  <button *ngIf="header_data.ismenu" ion-button icon-only menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <button *ngIf="header_data.ishome" class="algo-header-home-icon" ion-button icon-only (click)="homeClick()">
    <ion-icon class="ion-home" name="home"></ion-icon>
  </button>
  <ion-title class="header-title" [ngClass]="{'ishome-title': header_data.ishome,'ismeun-centre': !header_data.ishome}">
    {{header_data.title}}
  </ion-title>
</ion-navbar>

custom-header-component.ts

import { Component,Input } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../../pages/home/home';

@Component({
  selector: 'custom-header',
  templateUrl: 'custom-header.html'
})
export class CustomHeaderComponent {
  header_data: any;
  constructor(public navCtrl: NavController) {}
  @Input()
  set header(header_data: any) {
    this.header_data=header_data;
  }
  get header() {
    return this.header_data;
  }
  homeClick() {
    this.navCtrl.setRoot(HomePage);
  }
}

This custom-header-component takes configurations 'ismenu' of type boolean, 'ishome' of type boolean and 'title' of type string. Now lets use this component in page component 'home'. We want home page component to only have title and ismenu. Our code looks like this.

'home.html'

<ion-header><custom-header [header]="header_data"></custom-header></ion-header>
 <ion-content padding class="page-home">
   <p>Home Page</p>
 </ion-content>

'home.ts'

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  header_data:any;
  constructor(public navCtrl: NavController) {
    this.header_data={ismenu:true,ishome:false,title:"Home"};
  }
}

The home page header would look like this: