Custom component view issue (ionic 3 bug?)

[opahopa]

Greetings.

I’m new to ionic and trying different features. Recently implemented a custom component for header and getting a really strange issue with it.

component template(nav-header-main):

<ion-header>

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

</ion-header>

usage(main.html):

<nav-header-main [title]="'Main Page'"></nav-header-main>

<ion-content padding>
  <ion-buttons padding-top>
    <button ion-button full round (click)="getAds()">test</button>
  </ion-buttons>
</ion-content>

So, this is how the main.html looks like when i use the component:

(button is under the header)

On the other side, if i simply import the component’s html manually:

<!--<nav-header-main [title]="'Main Page'"></nav-header-main>-->

<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Main Page</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <ion-buttons padding-top>
    <button ion-button full round (click)="getAds()">test</button>
  </ion-buttons>
</ion-content>

It works as it should

Ionic Framework: 3.5.0
Ionic App Scripts: 2.0.0
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.11.0

[Sujan12]

Compare the generated HTML and CSS (maybe use git for /www) and see what is different.

(Interesting problem though, never tried that before)

PS: You can also upload picture directly here in the forum. Much nicer.

[rapropos]

I do not believe this is supported. I think <ion-header> must be a top-level element - i.e. you can’t bury it inside a component.

[opahopa]

wow, that need to be documented somehow then.
thought thats pretty typical to use component for header.

[rapropos]

@opahopa

wow, that need to be documented somehow then.

It is:

It’s important to note that ion-header needs to be the one of the three root elements of a page