CODEWITHSUNDEEP
angulartypescriptnebular
Matt
Matt

Reputation: 1

How do I nest components using the Nebular UI Kit?

I'm using Nebular UI Kit inside of my angular app, and want to nest a header component inside of the home page component. Since the attribute takes up the entire page by default, my components are two full size screens on top of each other. How do I properly nest Nebular components inside of other components?

I tried removing the attributes from the header component, and then nesting underneath the attributes in the home component, but then the header doesn't show up in the home component. Haven't been able to find a solution that works.

Here's what I currently have (everything works properly but the home component displays the header component as a full size window on top of the rest of the home component):

// Header Component / <app-header>
<nb-layout>
<nb-layout-header>
  <nb-actions size="medium">
    <nb-action routerLink="/page-1">Page 1</nb-action>
    <nb-action routerLink="/page-2">Page 2</nb-action>
  </nb-actions>
</nb-layout-header>
</nb-layout>

// Home Component
<app-header></app-header>
<nb-layout>
<nb-layout-column>
Column 1
</nb-layout-column>
</nb-layout>

Upvotes: 0

Views: 900

Answers (1)

Rachit Kyte.One
Rachit Kyte.One

Reputation: 1986

I think the problem is not with the header but with the fact that you're using <nb-layout> twice.

Try something like this where the header is not wrapped in nb-layout:

Header component:

<nb-layout-header>
  <nb-actions size="medium">
    <nb-action routerLink="/page-1">Page 1</nb-action>
    <nb-action routerLink="/page-2">Page 2</nb-action>
  </nb-actions>
</nb-layout-header>

Home component:

<nb-layout>
<app-header></app-header>
<nb-layout-column>
Column 1
</nb-layout-column>
</nb-layout>

Upvotes: 0

Related Questions