Even selected Items don't change state

[packe100]

Hi! I have an angular 11 application with latest ng-material-multilevel-menu v 5.5.3. I have a strange issue with my menu.

If I select any odd item, I obtain the expected behavior: the router navigates the link and the item switches to selected state (blue color). If I select an even item the link is navigated but the item doesn't switch to selected state.

Here is menu data structure inside the component:

appitems = [
    {
      label: 'Home',
      link: '/home',
      icon: 'home',
      hidden: false
    },
    {
      label: 'Menu 1',
      icon: 'language',
      hidden: false,
      items: [
        {
          label: 'Item 1',
          link: '/page1',
          icon: 'language',
          hidden: false
        },
        {
          label: 'Item 2',
          link: '/page2',
          icon: 'business',
          hidden: false
        },
        {
          label: 'Item 3',
          link: '/page3',
          icon: 'store',
          hidden: false
        },
        {
          label: 'Item 4',
          link: '/page4',
          icon: 'ballot',
          hidden: false
        },
        {
          label: 'Item 5',
          link: '/page5',
          icon: 'widgets',
          hidden: false
        }
      ]
    },
];

config = {
    paddingAtStart: true,
    interfaceWithRoute: true,
    classname: 'side-nav-menu',
    highlightOnSelect: true,
    collapseOnSelect: true,
    rtlLayout: false
  };

This is the template snipped:

<ng-material-multilevel-menu [items]='appitems'
                             (selectedItem)="selectedItem($event)"
                             [configuration]='config'>
</ng-material-multilevel-menu>

Any idea about the solution of this problem would be much appreciated! Thank you!

Max & Tonic

[packe100]

Good news! I found the issue: switching the config param "interfaceWithRoute" to false, the menu started working as expected. Unfortunately I don't know the reason... :(

[ShankyTiwari]

Hi @packe100 Can you please share the small repo so that I can see & work on it.

Thanks

[packe100]

Hi @packe100 Can you please share the small repo so that I can see & work on it.

Thanks

Thanks @ShankyTiwari for your help. At the moment I have only the full private repo on bitbucket. I should fork a little one on github..

[shanurrahman-gcsns]

switching the config param "interfaceWithRoute" to false, the menu started working verified and its true

[victorbritoyi]

selectedListItem(event: MultilevelNode): void { this.nodeExpandCollapseStatus = ExpandCollapseStatusEnum.neutral; if(!event.hasChildren) { this.currentNode = event; } if (!CommonUtils.isNullOrUndefined(event.dontEmit) && event.dontEmit) { return; } if (event.items === undefined && (!event.onSelected || typeof event.onSelected !== 'function') ) { this.selectedItem.emit(event); } else { this.selectedLabel.emit(event); } }