Ej1 api migration in Angular Split button component
15 Sep 20228 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 */ } |