How do I hide the CARET icon ?

[lorryl]

I want to hide the menu's caret icon, and keep settings icon in center. 

I can't find a property control the caret icon.

[Silambarasan I]

Hi Lorryl, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your query and currently, we don’t have any native property to hide the Caret icon in the menu. However, we would like to suggest you the below workaround solution to achieve your requirement. 

 

.e-menu-wrapper .e-menu .e-menu-item.e-menu-caret-icon .e-icons.e-caret { 

  display: none; 

} 

 

.e-menu-wrapper .e-menu .e-menu-item.e-menu-caret-icon { 

  padding-right: 5px; 

} 

 

Sample link: https://stackblitz.com/edit/angular-9g216v?file=default.html 

 

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 

[lorryl]

Thanks, that's working.

Another question: How to set the settings icon a title when hover on it ?

[Silambarasan I]

Hi Lorryl, 

 

Thanks for your update. 

 

Your requirement “To set the title for settings icon” can be achievable by using ‘beforeItemRender’ client-side event in EJ2 Menu. Please refer the below code example. 

 

Stackblitz sample: 

https://stackblitz.com/edit/angular-9g216v-eimsi9?file=default.html 

 

default.html 

 

<ejs-menu [items]='menuItems' (beforeItemRender)="onBeforeItemRender($event)">></ejs-menu> 

 

 

default.component.ts 

 

public menuItems: MenuItemModel[] = [ 

    { 

        id: 'settingIcon', 

        iconCss: 'em-icons e-file', 

        items: [ 

            //… 

        ] 

    } 

]; 

 

public onBeforeItemRender(args: MenuEventArgs) { 

  if (args.item.id == 'settingIcon') {         

    args.element.setAttribute('title', 'Settings'); 

  } 

} 

 

 

Could you please check the above sample and get back to us if you need further assistance? 

 

Regards, 

Silambarasan