Apply style to "menu selected"

[Allyson José]

Hi, 

I need apply style to Menu item selected, but the customization in documentation is only for children menu. 

Attachment: Capturar_797760e1.rar

[Silambarasan I]

Hi Allyson, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your requirement ‘Need to apply style to selected Menu item’ and it can be achievable by overriding selected CSS styles in Menu. Please refer the below sample and code example. 

 

Stackblitz sample: 

https://stackblitz.com/edit/angular-mdksym-hhu3la?file=menu.css 

 

Code Example:
CSS 

 

.e-menu-wrapper ul .e-menu-item.e-selected, 

.e-menu-wrapper ul.e-ul .e-menu-item.e-selected { 

  background-color: #0da8c0; 

} 

 

 

 

Note: 

The above solution is recommended only for item & dataSource binding in Menu. Based on the provided screenshot, we suspect that you are using ‘template’ binding and in that, you can customize styles for the header item & its sub menu items based on your template elements.  

 

Could you please check the above solution and get back to us with more information If you are using template binding? So, that we can analyze based on that and provide you a better solution. 

 

Regards, 

Silambarasan 

[Lucas Amaral]

Hi,

I am with also problem, so I should like to add the following remark: 

By clicking on the menu option, the component reloads the page, thus losing the selected menu of the component.

The route has been set to "URL" of the object.

What I can do ? 

Tks, 

Luke

[Allyson José]

My problem is that I set the selected route, not the click. How could I apply the style? My model has a boolean flag that informs the active item on the current route. How to tell this to your component?

In addition, I have the same problem as Lucas Amaral, when clicking on the menu, it reloads the application..

[Silambarasan I]

Hi Allyson, 

 

Thanks for your update. 

 

We have checked your requirement and as per our current behavior, we will generated anchor tags inside items when “url” property is added and, while clicking this item - it will reload the page. So, we would like to suggest you to use angular routing while selecting menu items by using ‘select’ event of menu and for maintain the selected state, we have added the ‘e-custom’ class to the selected item. 

 

Sample link: https://stackblitz.com/edit/angular-e7ee1p-5miftz?file=app/app.component.ts 

 

Could you please check the above sample and get back to us with more information if we misunderstood your requirement or you need any further assistance on this? 

 

Regards, 

Silambarasan 

[Rémy C]

Hi ! I've tried the solution provided by Silambarasan I but it didn't convince me as it needs a lot of custom JS.

So here is the solution I've come to, using ng-template in order to override menu items. This way you can access Angular's rooter within HTML template which is far lighter than reading and customizing each menu item manually with JS.

Within the ng-template, here's how to use router's methods to check if current item's route is active or not :

<div class="menu-item" [ngClass]="{'menu-is-active': router.isActive(router.parseUrl(menuItem.url), true)}">

You'll find documentation about those methods here : https://angular.io/api/router/Router

Since a css class is added when the menu item is active, you can even add a :hover selector to add more style to menu items.

Stackblitz : https://stackblitz.com/edit/angular-e7ee1p-gytbqn?file=app%2Fapp.component.ts

Regards, Rémy

[Saranya Dhayalan]

Hi Allyson,  

 

Thanks for the update 

 

Yes, we can use routing like these. Thanks for the suggestions. 

 

Regards, 

Saranya D