ionic-framework: Custom component for ion-navbar causing changes in design (v2)

Short description of the problem:

Creating a custom Component for ion-navbar causing changes in design

I working with ionic tabs and i also have a header on each tab. So instead of copy paste the header on each tab i wanted to create a Component. this cause for changes in the design

What behavior are you expecting?

I was expecting to the same header on each tab like if it were written inline

Steps to reproduce:

get starter-tabs project
create a Component with the folowing html

<ion-title>
  Bla bla
</ion-title>
<ion-buttons left (click)="openMenu()">
  <button>
    <ion-icon name="menu"></ion-icon>
  </button>
</ion-buttons>

use the directive in the pages

import {Component, Directive} from 'angular2/core';

@Component({
    selector: 'my-header',
    templateUrl: 'build/common/header/header.html'
})
export class MyHeader {
    constructor(){ }
}

And in the page:

<ion-navbar *navbar>
  <my-header></my-header>
</ion-navbar>

<ion-content padding class="page1">
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>www/app/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
</ion-content>

picture with the custom component: selection_001

without: selection_002

Which Ionic Version? 1.x or 2.x 2.x

Run ionic info from terminal/cmd prompt: (paste output below) Your system information:

Cordova CLI: 6.0.0 Gulp version: CLI version 3.9.0 Gulp local: Local version 3.9.1 Ionic Version: 2.0.0-beta.3 Ionic CLI Version: 2.0.0-beta.22 Ionic App Lib Version: 2.0.0-beta.12 OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.4 LTS Node Version: v5.9.0

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 21 (9 by maintainers)

Most upvoted comments

Thanks for using Ionic! Glad this was solved (:

jgw96 on Jul 12, 2016

So the only components that should be children of the page should be:

ion-header
ion-content
ion-footer

I’d recommend changing your custom header component to:

@Component({
  selector: 'header'
  template: `
  <ion-navbar primary>
    <ion-title>
      Ionic 2
    </ion-title>
  </ion-navbar>`
})

and then including it as:

<ion-header>
  <header></header>
</ion-header>

brandyscarney on Jul 11, 2016

Not a solution, but a workaround: place <ion-navbar> in the custom component.

Header component:

<ion-navbar *navbar>
  <ion-title>
    {{title}}
  </ion-title>
  <ion-buttons (click)="openMenu()">
    <button>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

Usage:

<my-header [title]="title"></my-header>

Works for me!

mungojerry on Apr 12, 2016