Ej1 api migration in Angular Menu component

4 Apr 202313 minutes to read

This article describes the API migration process of Menu component from Essential JS 1 to Essential JS 2.

Properties

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: “file_id”
  },
  {
    text: “Edit”,
    id: “edit_id”,
    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: “view_id”, url: “#”
  },
  {
    text: “Help”, id: “help_id”
  }
];
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

Methods

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([“#help_id”,”#edit_id”]);		 Method: hideItems

<ejs-menu id="menu" #menu [items]="menuItems"></ejs-menu>
@ViewChild(‘menu’)
public menu: MenuComponent;
this.menu.hideItems([“edit_id”,”help_id”], 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();

Events

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