Including general title bar for ionic 2 / angular 2

Question

I have an ionic-2 title bar containing a home or logout button and a company logo that is common to all pages. How to write a generic function (@Injectable ()) so that it will be very easy to include in all pages instead of repeating the code.

<ion-header>
  <ion-navbar class="hide-border toolbar-btn-color" id="radio">
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Send Money</ion-title>
    <ion-buttons end>
      <button (click)="goHome()">
        <ion-icon ios="ios-home" md="md-home"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

In each typescript file, I repeat the gohome () function. Is there any way to avoid this?

Answer 1

, , . .
custom-header-component

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>

-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);
  }
}

-- ismenu ' boolean, ishome' boolean title ' . home. , ismenu. .

'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"};
  }
}
<br/><br/>

.

Answer 2

, @mhartington ( Ionic) :

-, . , , , ( ) .

, :

- , angular2 . , , - .

Answer 3

, , , , , , .

Ionic, DESIGN .

<ion-header>
    <ion-navbar>
        <ion-title>Login</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    My content
</ion-content>

.. , . ,

<common-header></common-header>

<ion-content>
    My content
</ion-content>

... , , DOES - . , , , .

-header.ts:

//Include Input to @angular/core
import { Component, Input } from '@angular/core';

    @Component({
        selector: "common-header",
        templateUrl: "common-header.html"
    })
    export class CommonHeaderComponent {
        defaultTitle = "My default title";
        _title = this.defaultTitle;

        @Input()
        set title(newTitle: string) {
            newTitle = newTitle.trim();
            if (newTitle.length === 0) {
                newTitle = this.defaultTitle;
            }
            this._title = newTitle;
        }
        get title() {
            return this._title;
        }

        constructor() {
        }
    }

header.html:

<ion-navbar>
    <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{title}}</ion-title>
</ion-navbar>

, , , ,

<ion-header>
    <common-header [title]="'Title that is passed in'"></common-header>
</ion-header>

<ion-content>
 My content
</ion-content>