submenu pathMatch doesn't work at all

[JohnnyXuPeng]

Issue type

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

• [ x] bug report
• feature request
• question about the decisions made in the repository

Issue description

Current behavior:

I want to highlight the pathMatch 'menu' when user redirect to the child page, but it doesn't work

Expected behavior:

I want to highlight the pathMatch 'menu' when user redirect to the child page
Steps to reproduce:

Here is the menu setting snap:
{
title: 'Order Manage',
icon: 'nb-grid-b',
children: [
{
title: 'Order List',
link: '/pages/order/order-list',
},
{
title: 'Order Detail',
link: '/pages/order/order-detail',
pathMatch: 'order-list',
hidden: true
}
],
},

refer to the above code, the menu 'order-detail' is hidden as expected, but when I redirect to the path 'http://localhost:4200/#/pages/order/order-detail', the menu 'order-list' doesn't be highlighted as expected, please advise. Thanks in advance

Related code:

insert short code snippets here

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.
-->

[Prefix1802]

@JohnnyXuPeng

I noticed that sometimes the page DOM does not get updated accordingly.

Maybe do a ChangeDetectorRef or something like that?

https://angular.io/api/core/ChangeDetectorRef

[yggg]

Hi @JohnnyXuPeng. NbMenuItem.pathMatch works very similar to Route.pathMatch and supports only two options: full and prefix. First means compare NbMenuItem.link property to be exact as URL's path part and latter - URL path should contain NbMenuItem.link.
If I understood you correctly, you want to highlight order-list menu item when the path is /pages/order/order-detail or /pages/order/order-list. You can't assign multiple links to one menu item. But as a workaround, you can add hidden menu items as children of the menu item which should match multiple paths. And when one of the children match path parent menu item will be highlighted as well.
Here is example implementation. Initially, path is pages/order/order-list. Try to navigate pages/order/order-detail and notice that 'Order List' menu item is highlighted. See app.component.ts for the code example of work around described above.

And thanks for help @Prefix1802 👍

[myleshk]

For future Googlers, I'd like to emphasize that "pathMatch" field is only meant to be either "full" or "prefix", as mentioned by @yggg, and work together with "link" field.
The docs definitely need more details on this.

[przemekpobuta]

For me worked add pathMatch: 'prefix' for parent and every child.