nb-layout-header is not getting rendered if placed into separate component

[ShahnazK]

Issue type

I'm submitting a ... (check one with "x")

• [x ] bug report
• [ ] feature request

Issue description

Current behavior:

nb-layout-header is not getting rendered if I place this into another component Expected behavior:

Header should be rendered Steps to reproduce:

• Created new app

• Create another module

• Created homepage component with following code

<nb-layout>
    <nb-layout-header fixed>Company Name</nb-layout-header>
    <nb-sidebar><nb-menu [items]="menuItems"></nb-menu></nb-sidebar>

    <nb-layout-column>
      <nb-card>
        <nb-card-body>
          Card
          
        </nb-card-body>
      </nb-card>
    </nb-layout-column>
  </nb-layout>

This works as expected and I get header.

• Create another component named as header and place following code into that

    <nb-layout-header fixed>Company Name</nb-layout-header>

• Now add this header component into parent component, like

<nb-layout>
    <app-header></app-header>
    <nb-sidebar><nb-menu [items]="menuItems"></nb-menu></nb-sidebar>

    <nb-layout-column>
      <nb-card>
        <nb-card-body>
          Card
          
        </nb-card-body>
      </nb-card>
    </nb-layout-column>
  </nb-layout>

No header comes on the browser this time.

Other information:

npm, node, OS, Browser

npm version : 6.11.3
node version 10.16.0
Angular CLI 8.3.5
Nebular Theme 4.3.1

Angular, Nebular

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->

StackBlitz Link

[wvitzthum]

Any updates on this issue?

I am experiencing the same behaviour on Nebular Theme 4.5

[dcruz1990]

Im using it this way:

<nb-layout-header fixed> <app-header></app-header> </nb-layout-header>

[Buttars]

I would really like a workaround or fix for this issue.

[Tmjohnst]

Im using it this way:

<nb-layout-header fixed> <app-header></app-header> </nb-layout-header>

This appears to work. Is this the recommended method?

[Tmjohnst]

In the ngx-admin repo it uses this method.

  <nb-layout-header fixed>
    <ngx-header></ngx-header>
  </nb-layout-header>

https://github.com/akveo/ngx-admin/blob/7b2be348733d393c0a5bf4c9064b0b9f17129580/src/app/%40theme/layouts/one-column/one-column.layout.ts#L8-L10

[GabrielaRsanches]

This bug is still happening. No layout structure is being displayed. On inspect I can't even see the html of this component