Highlight Menu on Load for Child Routes

[afunworm]

Hello.

I am running into the issue that ng-material-mmultilevel-menu doesn't highlight child routes. I am aware that I can try to set the URL in the link but:

Let's say I have the route set up as below:

{
      label: 'Customers',
      items: [
        {
          label: 'All Customers',
          link: 'customers/all'
        },
        {
          label: 'Edit Customer',
          link: 'customers/edit'
        }
      ]
}

And the route definition:

{
        path: 'customers',
        children: [
          { path: 'all', component: CustomerComponent },
          { path: 'edit', component: EditCustomerComponent },
          { path: 'edit/:id', component: EditCustomerDetailComponent }
        ]
}

Is it better to have the module highlight the Edit Customer link when either customers/edit or customers/edit/random_customer_id or even customers/edit/random_customer_id/name is routed to? In the end, the first one is the parent route of all the children, and they all contains customers/edit, the rest is just anything (think of it as customers/edit/*).

I actually have been trying to manually check the URL and changing the navItems according to the loaded URL, but the issue is that if you change the link inside the navItems array, it affects the routing of it too. For example:

navItems = {
      label: 'Customers',
      items: [
        {
          label: 'All Customers',
          link: 'customers/all'
        },
        {
          label: 'Edit Customer', //Every time this link is click, angular route to customers/edit - Expected
          link: 'customers/edit'
        }
      ]
}

ngOnInit() {
      //Detect the child URL so that if it is 'customers/edit/customer_id', highlight 'Edit Customers'
      if (current_route_is_edit_user_with_customer_id()) {
            //Quick & dirty way to demonstrate my point only
            this.navItems.items[1].link = 'customers/edit/' + get_customer_id_from_url();
            //Now the highlight works, because the `link` has been updated.
            //HOWEVER, clicking on this link will now navigate to `customers/edit/id` instead of `customers/edit`...
      }
}

As you can see, there's no built-in method to highlight the link manually without changing the link, and even if we manage to highlight the link manually, the route target changes. There's no way I can think of that can help achieve this task.

I really do think this is some good default behavior to have, because most of the links will have nested children and the children might have children and so on. Why doesn't it just checks if the link starts with the path, and highlight it?

Please advise.

[mspoerer]

+1

[mspoerer]

For a Quick Solution see PR: #122

[ShankyTiwari]

Hi @afunworm, Are you still looking for solution to this?

I have one solution, which I think we can easily add here. What I can do is provide one more property called matchURL. This property will expect a function that will return either or false and based on that the rest of the flow will continue.

[
    {
        label: 'Customer',
        items: [
            {
                label: 'Edit Customer',
                link: '/customer/edt/:id',
                matchURL: function() {
                    // Some Logic
                    return true; 
                }
            },
            {
                label: 'Add Customer',
                link: '/customer/add',
            },
            {
                label: 'View Customer',
                link: '/customer/view/:id',
            }
        ]
    },
    {
        label: 'Owner',
        items: [
            {
                label: 'Edit Owner',
                link: '/owner/edt/:id',
                matchURL: function() {
                    // Some Logic
                    return true; 
                }
            },
            {
                label: 'Add Owner',
                link: '/owner/add',
            },
            {
                label: 'View Owner',
                link: '/owner/view/:id',
            }
        ]
    }
]

[ShankyTiwari]

@afunworm In matchURL() function, you can write RegEx validator or any other logic to validate the URL of the app.

[marxsk]

@ShankyTiwari I like this solution with matchURL. Do you a patch for that anywhere?

[ShankyTiwari]

Hi @marxsk For now I don't have any patch for this & I will have to work on it. May be tomorrow I can create a draft for this along with the steps, then you can check and see if it is working for you ?

Thanks

[marxsk]

@ShankyTiwari ok, I have created my solution for this as my scenario is a bit complex. So it may helps also others.

The main extension is that we have to match also query parameters as some of my links differs only in them. So, I have added a subscription to this.router.events and check for NavigationEnd.urlAfterRedirects and then there is a test if menu items contains ID (v5.5.2+ required) and test itself with selectMenuByID.

[afunworm]

Hi @marxsk For now I don't have any patch for this & I will have to work on it. May be tomorrow I can create a draft for this along with the steps, then you can check and see if it is working for you ?

Thanks

Hi.

It looks like it will useful!! Will you patch it somewhere? Do you still need help testing it?

[lrm6666]

Hi @marxsk For now I don't have any patch for this & I will have to work on it. May be tomorrow I can create a draft for this along with the steps, then you can check and see if it is working for you ?

Thanks

Hi @ShankyTiwari, do you have an update about this issue? Thanks in advance