# Custom component view issue (ionic 3 bug?)

**URL:** <https://forum.ionicframework.com/t/custom-component-view-issue-ionic-3-bug/99014>\
**Category:** ionic-v3\
**Created:** [July 21, 2017, 5:06am UTC](https://forum.ionicframework.com/t/custom-component-view-issue-ionic-3-bug/99014 "2017-07-21T05:06:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![opahopa](https://avatars.discourse-cdn.com/v4/letter/o/8e7dd6/32.png) [@opahopa](https://forum.ionicframework.com/u/opahopa)\
**Post date:** [July 21, 2017, 5:06am UTC](https://forum.ionicframework.com/t/custom-component-view-issue-ionic-3-bug/99014/1 "2017-07-21T05:06:10Z")

</div>

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):**

```auto
<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):**

```auto
<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:

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/f/7/f774df39408573f9def17ac31643b2a88d4dbeb6.png)

(button is under the header)

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

```auto
<!--<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**

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/0/3/03a9709572308234d428a16d7e54af0df9fcc416.png)

```auto
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

```

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [July 21, 2017, 3:30pm UTC](https://forum.ionicframework.com/t/custom-component-view-issue-ionic-3-bug/99014/3 "2017-07-21T15:30:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [July 21, 2017, 9:10pm UTC](https://forum.ionicframework.com/t/custom-component-view-issue-ionic-3-bug/99014/4 "2017-07-21T21:10:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![opahopa](https://avatars.discourse-cdn.com/v4/letter/o/8e7dd6/32.png) [@opahopa](https://forum.ionicframework.com/u/opahopa)\
**Post date:** [July 22, 2017, 3:32am UTC](https://forum.ionicframework.com/t/custom-component-view-issue-ionic-3-bug/99014/5 "2017-07-22T03:32:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [July 22, 2017, 3:35am UTC](https://forum.ionicframework.com/t/custom-component-view-issue-ionic-3-bug/99014/6 "2017-07-22T03:35:07Z")

</div>

> [@opahopa](#):
>
> wow, that need to be documented somehow then.

[It is](https://ionicframework.com/docs/api/components/toolbar/Header/):

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

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [August 9, 2017, 3:44pm UTC](https://forum.ionicframework.com/t/custom-component-view-issue-ionic-3-bug/99014/7 "2017-08-09T15:44:18Z")

</div>

Split this topic on August 9, 2017, 3:44pm UTC

A post was split to a new topic: [What are the 3 root elements of a page?](https://forum.ionicframework.com/t/what-are-the-3-root-elements-of-a-page/101433)