Ej1 api migration in Angular Split button component

5 Apr 20258 minutes to read

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

Properties

Behavior API in Essential® JS 1 API in Essential® JS 2
Specifies the text of the splitbutton Property: text

<ej-splitbutton id="splitbutton" text="login"></ej-splitbutton> 		Property: content

<ejs-splitbutton id="splitbutton" content="Paste"></ejs-splitbutton>
Popup content Property: target

<ej-splitbutton id="splitbutton" text="SplitButton" target="#target"></ej-splitbutton> 		Property: target

<ejs-splitbutton id="splitbutton" target="#target" content="SplitButton"></ejs-splitbutton>
Popup items Not applicable Property: items

<ejs-splitbutton id="splitbutton" content="Paste" [items]="items"></ejs-splitbutton>
items: ItemModel[] = [
  {
    text: ‘Cut’
  },
  {
    text: ‘Copy’
  },
  {
    text: ‘Paste’
  }
];
Arrow position Property: arrowPosition

<ej-splitbutton id="splitbutton" text="login" target="#target" arrowPosition="Left"></ej-splitbutton> 		Not applicable
Button mode Property: buttonMode

<ej-splitbutton id="splitbutton" text="login" target="#target" buttonMode="Dropdown"></ej-splitbutton> 		Not applicable
Content type Property: contentType

<ej-splitbutton id="splitbutton" text="login" contentType="TextOnly" target="#target"></ej-splitbutton> 		Not applicable
Icons Property: prefixIcon

<ej-splitbutton id="splitbutton" text="login" contentType="TextAndImage" prefixIcon="e-icon e-handup" target="#target"></ej-splitbutton> 		Property: iconCss

<ejs-splitbutton id="splitbutton" content="Paste" [items]="items" iconCss="e-icons e-paste"></ejs-splitbutton>
Icon position Property: imagePosition

<ej-splitbutton id="splitbutton" text="login" contentType="TextAndImage" prefixIcon="e-icon e-handup" target="#target" imagePosition="ImageTop"></ej-splitbutton> 		Property: iconPosition

<ejs-splitbutton id="splitbutton" content="Paste" [items]="items" iconCss="e-icons e-paste" iconPosition="Top"></ejs-splitbutton>
Secondary icon Property: suffixIcon

<ej-splitbutton id="splitbutton" text="login" contentType="ImageTextImage" prefixIcon="e-icon e-handup" suffixIcon="e-icon e-palette" target="#target"></ej-splitbutton> 		Not applicable
Adding custom class Property: cssClass

<ej-splitbutton id="splitbutton" text="SplitButton" target="#target" cssClass="custom-class"></ej-splitbutton> 		Property: cssClass

<ejs-splitbutton id="splitbutton" [items]="items" cssClass="custom-class"></ejs-splitbutton>
Disabled state Property: enabled

<ej-splitbutton id="splitbutton" text="login" target="#target" [enabled]="false"></ej-splitbutton> 		Property: disabled

<ejs-splitbutton id="splitbutton" (items)="items" [disabled]="true"></ejs-splitbutton>
RTL Property: enableRTL

<ej-splitbutton id="splitbutton" text="login" target="#target" contentType="TextAndImage" prefixIcon="e-icon e-handup" [enableRTL]="true"></ej-splitbutton> 		Property: enableRtl

<ejs-splitbutton id="splitbutton" [items]="items" content="Paste" [enableRtl]="true" iconCss="e-icons e-paste"></ejs-splitbutton>
Height Property: height

<ej-splitbutton id="splitbutton" text="login" target="#target" height="30px"></ej-splitbutton> 		Not applicable
Width Property: width

<ej-splitbutton id="splitbutton" text="login" target="#target" width="100px"></ej-splitbutton> 		Not applicable
HTML attributes Property: htmlAttributes

<ej-splitbutton id="splitbutton" text="login" target="#target" [htmlAttributes]="attributes"></ej-splitbutton> 		Not applicable
Show rounded corner Property: showRoundedCorner

<ej-splitbutton id="splitbutton" text="login" target="#target" [showRoundedCorner]="true"></ej-splitbutton> 		Not applicable
Size Property: size

<ej-splitbutton id="splitbutton" size="small" text="Small" target="#target"></ej-splitbutton> 		Property: cssClass

<ejs-splitbutton id="splitbutton" [items]="items" content="Small" cssClass="e-small"></ejs-splitbutton>

Methods

Behavior API in Essential® JS 1 API in Essential® JS 2
Destroy method Method: destroy

<ej-splitbutton #split id="splitbutton" text="SplitButton" target="#target"></ej-splitbutton>
@ViewChild(‘split’)
public splitButton: SplitButtonComponent;
this.splitButton.destroy();		 Method: destroy

<ejs-splitbutton #split id="splitbutton" [items]="items" content="SplitButton"></ejs-splitbutton>
@ViewChild(‘split’)
public splitButton: SplitButtonComponent;
this.splitButton.destroy();
Disable method Method: disable

<ej-splitbutton #split id="splitbutton" text="SplitButton" target="#target"></ej-splitbutton>
@ViewChild(‘split’)
public splitButton: SplitButtonComponent;
this.splitButton.disable();		 Not applicable
Enable method Method: enable

<ej-splitbutton #split id="splitbutton" text="SplitButton" target="#target"></ej-splitbutton>
@ViewChild(‘split’)
public splitButton: SplitButtonComponent;
this.splitButton.enable();		 Not applicable
Hide popup Method: hide

<ej-splitbutton #split id="splitbutton" text="SplitButton" target="#target"></ej-splitbutton>
@ViewChild(‘split’)
public splitButton: SplitButtonComponent;
this.splitButton.hide();		 Method: toggle

<ejs-splitbutton #split id="splitbutton" [items]="items" content="SplitButton"></ejs-splitbutton>
@ViewChild(‘split’)
public splitButton: SplitButtonComponent;
this.splitButton.toggle();
Show popup Method: show

<ej-splitbutton #split id="splitbutton" text="SplitButton" target="#target"></ej-splitbutton>
@ViewChild(‘split’)
public splitButton: SplitButtonComponent;
this.splitButton.show();		 Method: toggle

<ejs-splitbutton #split id="splitbutton" [items]="items" content="SplitButton"></ejs-splitbutton>
@ViewChild(‘split’)
public splitButton: SplitButtonComponent;
this.splitButton.toggle();

Events

Behavior API in Essential® JS 1 API in Essential® JS 2
BeforeOpen event Event: beforeOpen

<ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (beforeOpen)="beforeOpen($event)"></ej-splitbutton>
beforeOpen(args) {
     /** code block */
}		 Event: beforeOpen

<ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (beforeOpen)="beforeOpen($event)"></ejs-splitbutton>
beforeOpen(args) {
     /** code block */
}
Click event Event: click

<ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (click)="click($event)"></ej-splitbutton>
click(args) {
     /** code block */
}		 Event: click

<ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (click)="click($event)"></ejs-splitbutton>
click(args) {
     /** code block */
}
Close event Event: close

<ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (close)="close($event)"></ej-splitbutton>
close(args) {
     /** code block */
}		 Event: close

<ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (close)="close($event)"></ejs-splitbutton>
close(args) {
     /** code block */
}
Create event Event: create

<ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (create)="create($event)"></ej-splitbutton>
create(args) {
     /** code block */
}		 Event: created

<ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (created)="created()"></ejs-splitbutton>
created() {
     /** code block */
}
Destroy event Event: destroy

<ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (destroy)="destroy($event)"></ej-splitbutton>
destroy(args) {
     /** code block */
}		 Not applicable
ItemMouseOut event Event: itemMouseOut

<ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (itemMouseOut)="itemMouseOut($event)"></ej-splitbutton>
itemMouseOut(args) {
     /** code block */
}		 Not applicable
ItemMouseOver event Event: itemMouseOver

<ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (itemMouseOver)="itemMouseOver($event)"></ej-splitbutton>
itemMouseOver(args) {
     /** code block */
}		 Not applicable
Item select event Event: itemSelected

<ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (itemSelected)="itemSelected($event)"></ej-splitbutton>
itemSelected(args) {
     /** code block */
}		 Event: select

<ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (select)="select($event)"></ejs-splitbutton>
select(args) {
     /** code block */
}
Open event Event: open

<ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (open)="open($event)"></ej-splitbutton>
open(args) {
     /** code block */
}		 Event: open

<ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (open)="open($event)"></ejs-splitbutton>
open(args) {
     /** code block */
}
BeforeClose event Not applicable Event: beforeClose

<ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (beforeClose)="beforeClose($event)"></ejs-splitbutton>
beforeClose(args) {
     /** code block */
}
BeforeItemRender event Not applicable Event: beforeItemRender

<ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (beforeItemRender)="beforeItemRender($event)"></ejs-splitbutton>
beforeItemRender(args) {
     /** code block */
}