Navigation menu is not working when put in a separate component in Angular

[TDaniel-evo]

What happened?

When I put the ix-menu component in a separate Angular component it displays the menu in the wrong place. "menu" slot is empty and the menu is in the "content" area.

What type of frontend frameware are you seeing the problem on?

Angular

Which version of iX do you use?

2.0.1

Code to produce this issue.

app.component.html
<ix-basic-navigation>
  <div class="placeholder-logo" slot="logo">
    <img src="myImage.png" />
  </div>
  <app-menu></app-menu>      <----------------
  <div class="routerContent">
    <router-outlet></router-outlet>
  </div>
</ix-basic-navigation>

menu.component.html
<ix-menu>
  <ix-menu-item icon="report-barchart"></ix-menu-item>
  <ix-menu-item icon="capacity"></ix-menu-item>
  <ix-menu-item icon="controller-device"></ix-menu-item>
  <ix-menu-item icon="globe" slot="bottom" #triggerLanguageSelector></ix-menu-item>
  <ix-dropdown [ixDropdownTrigger]="triggerLanguageSelector" placement="right-end">
    <ix-dropdown-item></ix-dropdown-item>
  </ix-dropdown>
  <ix-menu-item icon="question" slot="bottom" #triggerHelpMenu></ix-menu-item>
  <ix-dropdown [ixDropdownTrigger]="triggerHelpMenu" placement="right-end">
    <ix-dropdown-item></ix-dropdown-item> 
  </ix-dropdown>
  <ix-menu-about label="">
    <app-menu-about></app-menu-about> (about menu items are in a separate component)
  </ix-menu-about>
</ix-menu>

[danielleroux]

This a a current limitation of the Web Components slot functionality. Can you try to add slot="menu" as a property to your nested angular component?

app.component.html
<ix-basic-navigation>
  <div class="placeholder-logo" slot="logo">
    <img src="myImage.png" />
  </div>
  <app-menu slot="menu"></app-menu>      <---------------- LIKE THIS
  <div class="routerContent">
    <router-outlet></router-outlet>
  </div>
</ix-basic-navigation>

[matthiashader]

We will close this issue, if this problem still occurs don't hesitate to open a new issue.