This article describes the API migration process of Menu component from Essential JS 1 to Essential JS 2.
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Animation type on hover or click on the menu items | Property: animationType <ej-menu id="menu" [animationType]="animationType"></ej-menu> animationType: any = ej.AnimationType.Default; |
Not applicable |
| Context menu target | Property: contextMenuTarget <ej-menu id="menu" contextMenuTarget="#target"></ej-menu> |
Not applicable |
| Container element for submenu’s collision | Property: container <ej-menu id="menu" contextMenuTarget="#target" container="#target"></ej-menu> |
Not applicable |
| Menu items | Not applicable | Property: items <ejs-menu id="menu" [items]="menuItems"></ejs-menu> menuItems: MenuItemModel[] = [ { text: “File”, id: “fileid” }, { text: “Edit”, id: “editid”, items: [ { text” “Cut”, iconCss: “e-icons e-cut” }, { text: “Copy”, iconCss: “e-icons e-copy” }, { text: “Paste”, iconCss: “e-icons e-paste” } ] }, { text: “view”, id: “viewid”, url: ”#” }, { text: “Help”, id: “helpid” } ]; |
| Adding custom class | Property: cssClass <ej-menu id="menu" cssClass="custom-class"></ej-menu> |
Property: cssClass <ejs-menu id="menu" cssClass="custom-class" [items]="menuItems"></ejs-menu> |
| Enables or disables the animation on hover or click on the menu items | Property: enableAnimation <ej-menu id="menu" [enableAnimation]="true"></ej-menu> |
Not applicable |
| Animation settings | Not applicable | Property: animationSettings <ejs-menu id="menu" [animationSettings]="animation" [items]="menuItems"></ejs-menu> animation: MenuAnimationSettings = { effect: “FadeIn” } |
| Root menu items to be aligned center in horizontal menu | Property: enableCenterAlign <ej-menu id="menu" [enableCenterAlign]="true"></ej-menu> |
Not applicable |
| Disabled state | Property: enabled <ej-menu id="menu" [enabled]="false"></ej-menu> |
Property: disabled <ejs-menu id="menu" [disabled]="true" [items]="menuItems"></ejs-menu> |
| RTL | Property: enableRTL <ej-menu id="menu" [enableRTL]="true"></ej-menu> |
Property: enableRtl <ejs-menu id="menu" [items]="menuItems" [enableRtl]="true"></ejs-menu> |
| Enables/Disables the separator | Property: enableSeparator <ej-menu id="menu" [enableSeparator]="false"></ej-menu> |
Not applicable |
| Menu Type | Property: menuType <ej-menu id="menu" [menuType]="menuType"></ej-menu> menuType: any = ej.MenuType.ContextMenu; |
Not applicable |
| Exclude target for context menu | Property: excludeTarget <ej-menu id="menu" [menuType]="menuType" contextMenuTarget="#target" excludeTarget=".inner"></ej-menu> |
Not applicable |
| Fields | Property: fields <ej-menu id="menu" [field]="menuFields">/ej-menu> menuFields: Object = { dataSource: this.data, parentId: “parentId”, id: “id”, text: “text” }; |
Property: fields <ejs-menu id="menu" disabled="true" [items]="menuItems" [fields]="menuFields"></ejs-menu> menuFields: Object = { text: [“text”], children: [“children”] }; |
| Height | Property: height <ej-menu id="menu" [height]="50"></ej-menu> |
Not applicable |
| Width | Property: width <ej-menu id="menu" [width]="800"></ej-menu> |
Not applicable |
| HTML Attributes | Property: htmlAttributes <ej-menu id="menu" [htmlAttribute]="attributes"></ej-menu> |
Not applicable |
| Responsive | Property: isResponsive <ej-menu id="menu" [isResponsive]="true"></ej-menu> |
Not applicable |
| Show item on click | Property: openOnClick <ej-menu id="menu" [openOnClick]="true"></ej-menu> |
Property: showItemOnClick <ejs-menu id="menu" [showItemOnClick]="true" [items]="menuItems"></ejs-menu> |
| Orientation | Property: orientation <ej-menu id="menu" orientation="vertical"></ej-menu> |
Property: orientation <ejs-menu id="menu" orientation="Vertical" [items]="menuItems"></ejs-menu> |
| Show root level arrows | Property: showRootLevelArrows <ej-menu id="menu" [showRootLevelArrows]="false"></ej-menu> |
Not applicable |
| Show sub level arrows | Property: showSubLevelArrows <ej-menu id="menu" [showSubLevelArrows]="false"></ej-menu> |
Not applicable |
| Sub menu direction | Property: subMenuDirection <ej-menu id="menu" [subMenuDirection]="direction"></ej-menu> direction: any = ej.Direction.Left; |
Not applicable |
| Title | Property: titleText <ej-menu id="menu" titleText="Title of the Menu"></ej-menu> |
Not applicable |
| Template | Not applicable | Property: template <ejs-menu id="menu" [items]="data" [fields]="menuFields" template="#menuTemplate"></ejs-menu> |
| Pop up menu height | Property: overflowHeight <ej-menu id="menu" [overflowHeight]="200"></ej-menu> |
Not applicable |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Disable Method | Method: disable <ej-menu id="menu" #menu [fields.dataSource]="data"></ej-menu> @ViewChild(‘menu’) public menu: MenuComponent; this.menu.disable(); |
Not applicable |
| Disable menu items | Method: disableItem <ej-menu id="menu" #menu [fields.dataSource]="data"></ej-menu>@ViewChild(‘menu’) public menu: MenuComponent; this.menu.disableItem(“File”); |
Method: enableItems <ejs-menu id="menu" #menu [items]="menuItems"></ejs-menu> @ViewChild(‘menu’) public menu: MenuComponent; this.menu.enableItems(“File”, false) |
| Disable menu items by ID | Method: disableItemByID <ej-menu id="menu" #menu [fields.dataSource]="data"></ej-menu>@ViewChild(‘menu’) public menu: MenuComponent; this.menu.disableItemByID(“file_id”); |
Method: enableItems <ejs-menu id="menu" #menu [items]="menuItems"></ejs-menu> @ViewChild(‘menu’) public menu: MenuComponent; this.menu.enableItems(“file_id”, false, true) |
| Enable Method | Method: enable <ej-menu id="menu" #menu [fields.dataSource]="data"></ej-menu> @ViewChild(‘menu’) public menu: MenuComponent; this.menu.enable(); |
Not applicable |
| Enable menu items | Method: enableItem <ej-menu id="menu" #menu [fields.dataSource]="data"></ej-menu>@ViewChild(‘menu’) public menu: MenuComponent; this.menu.enableItem(“File”); |
Method: enableItems <ejs-menu id="menu" #menu [items]="menuItems"></ejs-menu> @ViewChild(‘menu’) public menu: MenuComponent; this.menu.enableItems(“File”, true); |
| Enable menu items by ID | Method: enableItemByID <ej-menu id="menu" #menu [fields.dataSource]="data"></ej-menu>@ViewChild(‘menu’) public menu: MenuComponent; this.menu.enableItemByID(“file_id”); |
Method: enableItems <ejs-menu id="menu" #menu [items]="menuItems"></ejs-menu> @ViewChild(‘menu’) public menu: MenuComponent; this.menu.enableItems(“file_id”, true, true); |
| Hide Method | Method: hide <ej-menu id="menu" #menu [fields.dataSource]="data"></ej-menu>@ViewChild(‘menu’) public menu: MenuComponent; this.menu.hide(); |
Not applicable |
| Hide menu items | Method: hideItems <ej-menu id="menu" #menu [fields.dataSource]="data"></ej-menu>@ViewChild(‘menu’) public menu: MenuComponent; this.menu.hideItems([“#helpid”,“#editid”]); |
Method: hideItems <ejs-menu id="menu" #menu [items]="menuItems"></ejs-menu> @ViewChild(‘menu’) public menu: MenuComponent; this.menu.hideItems([“editid”,“helpid”], true); |
| Insert menu items | Method: insert <ej-menu id="menu" #menu [fields.dataSource]="data"></ej-menu>@ViewChild(‘menu’) public menu: MenuComponent; this.menu.insert([{ id: “view_id”, text: “View” }], “#edit_id”); |
Not applicable |
| Insert menu items after the specified menu item | Method: insertAfter <ej-menu id="menu" #menu [fields.dataSource]="data"></ej-menu>@ViewChild(‘menu’) public menu: MenuComponent; this.menu.insertAfter([{ id: “view_id”, text: “View” }], “#edit_id”); |
Method: insertAfter <ejs-menu id="menu" #menu [items]="menuItems"></ejs-menu> @ViewChild(‘menu’) public menu: MenuComponent; this.menu.insertAfter([{ id: “view_id”, text: “View” }], “Edit”); |
| Insert menu items before the specified menu item | Method: insertBefore <ej-menu id="menu" #menu [fields.dataSource]="data"></ej-menu>@ViewChild(‘menu’) public menu: MenuComponent; this.menu.insertBefore([{ id: “view_id”, text: “View” }], “#help_id”); |
Method: insertBefore <ejs-menu id="menu" #menu [items]="menuItems"></ejs-menu> @ViewChild(‘menu’) public menu: MenuComponent; this.menu.insertBefore([{ id: “view_id”, text: “View” }], “Help”); |
| Remove menu items | Method: remove <ej-menu id="menu" #menu [fields.dataSource]="data"></ej-menu>@ViewChild(‘menu’) public menu: MenuComponent; this.menu.remove([“#Edit”]); |
Method: removeItems <ejs-menu id="menu" #menu [items]="menuItems"></ejs-menu> @ViewChild(‘menu’) public menu: MenuComponent; this.menu.removeItems([“Edit”]); |
| To show menu | Method: show <ej-menu id="menu" #menu [fields.dataSource]="data"></ej-menu>@ViewChild(‘menu’) public menu: MenuComponent; this.menu.show(); |
Not applicable |
| Destroy method | Method: destroy <ej-menu id="menu" #menu [fields.dataSource]="data"></ej-menu>@ViewChild(‘menu’) public menu: MenuComponent; this.menu.destroy(); |
Method: destroy <ejs-menu id="menu" #menu [items]="menuItems"></ejs-menu> @ViewChild(‘menu’) public menu: MenuComponent; this.menu.destroy(); |
| Behavior | API in Essential JS 1 | API in Essential JS 2 |
|---|---|---|
| Triggers before opening the menu | Events: beforeOpen <ej-menu id="menu" (beforeOpen)="beforeOpen($event)"></ej-menu> beforeOpen(args) { /** code block */ } |
Events: beforeOpen <ejs-menu id="menu" [items]="menuItems" (beforeOpen)="beforeOpen($event)"></ejs-menu> beforeOpen(args) { /** code block */ } |
| Triggers before closing the menu | Not applicable | Events: beforeClose <ejs-menu id="menu" [items]="menuItems" (beforeClose)="beforeClose($event)"></ejs-menu> beforeClose(args) { /** code block */ } |
| Triggers before rendering each menu item | Not applicable | Events: beforeItemRender <ejs-menu id="menu" [items]="menuItems" (beforeItemRender)="beforeItemRender($event)"></ejs-menu> beforeItemRender(args) { /** code block */ } |
| Triggers while selecting the menu item | Events: click <ej-menu id="menu" (click)="click($event)"></ej-menu> click(args) { /** code block */ } |
Events: select <ejs-menu id="menu" [items]="menuItems" (select)="select($event)"></ejs-menu> select(args) { /** code block */ } |
| Triggers after closing the menu | Events: close <ej-menu id="menu" (close)="close($event)"></ej-menu> close(args) { /** code block */ } |
Events: onClose <ejs-menu id="menu" [items]="menuItems" (onClose)="onClose($event)"></ejs-menu> onClose(args) { /** code block */ } |
| Triggers after opening the menu | Events: open <ej-menu id="menu" (open)="open($event)"></ej-menu> open(args) { /** code block */ } |
Events: onOpen <ejs-menu id="menu" [items]="menuItems" (onOpen)="onOpen($event)"></ejs-menu> onOpen(args) { /** code block */ } |
| Triggers once the component rendering is completed | Events: create <ej-menu id="menu" (create)="create($event)"></ej-menu> create(args) { /** code block */ } |
Events: created <ejs-menu id="menu" [items]="menuItems" (created)="created()"></ejs-menu> created() { /** code block */ } |
| Triggers once the component is destroyed | Events: destroy <ej-menu id="menu" (destroy)="destroy($event)"></ej-menu> destroy(args) { /** code block */ } |
Not applicable |
| Triggers when key down on menu items | Events: keydown <ej-menu id="menu" (keydown)="keydown($event)"></ej-menu> keydown(args) { /** code block */ } |
Not applicable |
| Triggers when mouse out from menu items | Events: mouseout <ej-menu id="menu" (mouseout)="mouseout($event)"></ej-menu> mouseout(args) { /** code block */ } |
Not applicable |
| Triggers when mouse over the Menu items | Events: mouseover <ej-menu id="menu" (mouseover)="mouseover($event)"></ej-menu> mouseover(args) { /** code block */ } |
Not applicable |
| Triggers when overflow popup menu opens | Events: overflowOpen <ej-menu id="menu" (overflowOpen)="overflowOpen($event)"></ej-menu> overflowOpen(args) { /** code block */ } |
Not applicable |
| Triggers when overflow popup menu closes | Events: overflowClose <ej-menu id="menu" (overflowClose)="overflowClose($event)"></ej-menu> overflowClose(args) { /** code block */ } |
Not applicable |