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

[royipressburger]

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:

1. get starter-tabs project
2. 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>

1. 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:

without:

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

[jgw96]

Hello! We are currently investigating this bug, but we have ran into some issues regarding content projection. I will keep you updated on the status of this issue!

[brandyscarney]

Hey @royipressburger, so the reason the styles aren't showing up is because you need to inject IONIC_DIRECTIVES in your custom component:

import {Component, Directive} from 'angular2/core';
import {IONIC_DIRECTIVES} from 'ionic-angular';

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

While this will fix your immediate use case, there is still an issue with content projection where <ion-buttons left> is not placed correctly in the markup because of the my-header wrapper. Going to keep this open so we can discuss a solution to the content projection. :smile:

cc @adamdbradley

[royipressburger]

@brandyscarney Is this what you talking about?

[brandyscarney]

@royipressburger Can you paste the markup, please?

[royipressburger]

@brandyscarney what do you mean by markup?

[brandyscarney]

@royipressburger Sorry, the html code you are writing for the navbar. :smile:

[royipressburger]

@brandyscarney sorry for my ignorance :)

The header component

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

and the useage:

<ion-navbar *navbar>
  <my-header [title]="title"></my-header>
</ion-navbar>

[mungojerry]

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!

[royipressburger]

@mattfolkard This did not worked for me.. still when openign via ionic lab its looks like the picture above(just android)

[royipressburger]

@brandyscarney Hi, Is there anything I do as a work around? or just play with the css?

[adamdbradley]

With the most recent beta, can you place your content within an ion-toolbar, which goes within ion-header?

[royipressburger]

@adamdbradley I didn't really understand you.
But changing the HTML worked for me..

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

Looks like the <ion-buttons> is the cause

[jgw96]

Hello @royipressburger if you take a look at our changelog for beta.10 you will see an example of the new way to use navbars and headers. If you could give it a try that would be great!

[royipressburger]

@jgw96 So the problem now is a bit different.. It looks like the header width is being ignore and some components are going before him or behind him

As you can see on ios the header is above the content.. and on android the header is behind the tabs (I think I cant see it.)

[jgw96]

@royipressburger Would you mind making a plunker that demonstrates this issue? You can use this plunker as a template. Thanks!

[royipressburger]

@jgw96 there we go http://plnkr.co/edit/AQMUk7aGZkaFR2jYrfXD?p=preview :)
As you can see the h1 tag is behind the header

[brandyscarney]

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

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>

[royipressburger]

@brandyscarney Thanks looking good. Guess you can close this

[jgw96]

Thanks for using Ionic! Glad this was solved (:

[MT--]

in 3.6.0, this will cause the .statusbar-padding class to be incorrectly applied for iOS, since it relies on the :first-child of the <ion-header>... your custom component should not include <ion-toolbar> or <ion-navbar>, but should be a child of one of these components in the header for correct styling on iOS

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.