menu does not expand correctly

[ruisebastiao]

Issue type

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

• [ x] bug report
• feature request

Issue description

Current behavior:

when sub-menu items are added asynchronous the parent menu does not expand correctly if a sub-menu is selected and a page reload occurs.

Expected behavior:

Steps to reproduce:

Related code:

  ngAfterViewInit(): void {
 
    this.userService.currentUser.takeUntil(this._destroyed).subscribe(user => {
      if (user && user.units) {
        const molds_menu = [];

        user.units.forEach(unit => {
          molds_menu.push({
            title: unit.userdata.unit_description,
            link: '/pages/unit/' + unit.serialnumber,
            tag: 'unitchild'
          });
        });

        this.menu[1].children = molds_menu;

        
        this.changedetectorref.detectChanges();
      }
    });
  }

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->

Angular, Nebular

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

[ruisebastiao]

this is how i solve this problem:

when the submenu is changed at run-time and if the and the

expand property is false the submenuhigh is not calculated and gets value 0 as we can see in the function:

nebular/src/framework/theme/components/menu/menu.component.ts

Line 32 in 16314e8

function sumSubmenuHeight(item: NbMenuItem) {

function sumSubmenuHeight(item: NbMenuItem) {
  return item.expanded
    ? (item.subMenuHeight || 0) + item.children.filter(c => c.children).reduce((acc, c) => acc + sumSubmenuHeight(c), 0)
    : 0;
}

so i changed my code and set the expanded variable to true before setting the submenu:

        this.menu[1].expanded = true;
        this.menu[1].children = molds_menu;

        setTimeout(() => {
          this.changedetectorref.detectChanges();
        }, 250);

[nnixaa]

Hi @ruisebastiao, thanks for reporting!

[nnixaa]

Hey @ruisebastiao, have you tried NbMenuService.addItems() instead of modifying the variable by reference? Is it working properly in that case?

[ruisebastiao]

Hi @nnixaa , the only async data are the menu children, how can i use addItems to add children items? But i try to use the addItems to add the root Item with the children data and the problem persists and now the child item doesn't get selected, here is my code:

 this.userService.currentUser.takeUntil(this._destroyed).subscribe(user => {
      if (user && user.units) {
        const molds_menu = [];

        user.units.forEach(unit => {
          molds_menu.push({
            title: unit.userdata.unit_description,
            link: '/pages/unit/' + unit.serialnumber,
            tag: 'unitchild'
          });
        });


         this.menuService.addItems([
         {
             title: 'Molds',
             icon: 'ion-ios-browsers-outline',
             children: molds_menu
           }
         ]);
        this.changedetectorref.detectChanges();

      }
    });

[nnixaa]

#532

[nnixaa]

akveo/ngx-admin#1703