How to hide caret icon in Menu items
This knowledge base explains the way to hide caret icon in Menu. You can achieve this requirement in EJ2 Menu by adding custom property “isCaretIconHide” in data source. In the below code example, we have hidden the caret icon by applying the “customMenu” and “iconOnly” CSS class in beforeItemRender event as like in the below code example.
HTML
<ejs-menu [items]='dataSource' [fields]='menuFields' (beforeItemRender)='itemBeforeEvent($event)'> <ng-template #template let-dataSource=""> <span *ngIf="dataSource.iconCss " class="{{'e-menu-icon em-icons ' + dataSource.iconCss}}"></span> {{dataSource.text}} <div *ngIf="dataSource.value">{{dataSource.value}}</div> </ng-template> </ejs-menu> |
TS
export class TemplateMenuController { public dataSource: { [key: string]: Object }[] = [ { isCaretIconHide: true, iconCss: 'em-icons e-file', items: [ { text: 'Open' }, { text: 'Save' }, { separator: true }, { text: 'Exit' } ] }, { isCaretIconHide: true, text: 'Edit', iconCss: 'em-icons e-edit', items: [ { text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' } ] }, { text: 'Tools', isCaretIconHide: true, items: [ { text: 'Spelling & Grammar' }, { text: 'Customize' }, { separator: true }, { text: 'Options' } ] } ];
public menuFields: object = { text: ['value'] }; public itemBeforeEvent (args: MenuEventArgs) { if(args.item["isCaretIconHide"]) args.element.classList.add(args.item.text.length ? 'customMenu' : 'iconOnly') } } |
CSS
/* Custom CSS for caret customization */
.e-menu-wrapper ul .e-menu-item.customMenu .e-caret,.e-menu-wrapper ul .e-menu-item.iconOnly .e-caret{ display: none; }
.e-menu-wrapper ul .e-menu-item.e-menu-caret-icon.iconOnly{ padding-right: 0; }
.e-menu-wrapper ul .e-menu-item.e-menu-caret-icon.customMenu{ padding-right: 8px; }
|
The following output displays the result of hiding caret icon in Menu.
Demo Sample: https://stackblitz.com/edit/angular-raekd7-nnppaj?file=template.html
Note: The custom property “isCaretIconHide” should applicable for JavaScript object array binding not for MenuItemModel.
