Ej1 api migration in Angular Button component

15 Sep 20226 minutes to read

This article describes the API migration process of Button 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 button Property: text

<button ej-button id="btn" text="Button"></button> 		Property: content

<button ejs-button id="btn" content="Button"></button>
Specifies the content type of the button Property: ContentType

<button ej-button id="btn" text="Save" contentType="TextAndImage" prefixIcon="e-icon e-save"></button> 		Not applicable
Specifies icon for the button Property: prefixIcon

<button ej-button id="btn" contentType="ImageOnly" prefixIcon="e-icon e-save"></button> 		Property: iconCss

<button ejs-button id="btn" iconCss="e-icons e-save"></button>
Positioning icon in the button Property: imagePosition

<button ej-button id="btn" contentType="TextAndImage" text="Save" prefixIcon="e-icon e-save" imagePosition="ImageRight"></button> 		Property: iconPosition

<button ejs-button id="btn" content="Save" iconCss="e-icons e-save" iconPosition="Right"></button>
Specifies secondary icon for the button Property: suffixIcon

<button ej-button id="btn" text="FileSearch" contentType="ImageTextImage" prefixIcon="e-icon e-search" suffixIcon="e-icon e-file-html"></button> 		Not applicable
Adding custom class Property: cssClass

<button ej-button id="btn" text="Button" cssClass="custom-class"></button> 		Property: cssClass

<button ejs-button id="btn" cssClass="custom-class" content="Button"></button>
Specifies the size of the button Property: size

<button ej-button id="btn" text="Button" size="small"></button> 		Property: cssClass

<button ejs-button id="btn" cssClass="e-small" content="Button"></button>
Triggers click event repeatedly while pressing the button Property: repeatButton

<button ej-button id="btn" text="Click" [repeatButton]="true"></button> 		Not applicable
Sets time interval between two consecutive click event on the repeat button Property: timeInterval

<button ej-button id="btn" text="Click" [repeatButton]="true" timeInterval="100"></button> 		Not applicable
Specifies the type of the button Property: type

<button ej-button id="btn" text="Button" type="Button"></button> 		Not applicable
Changes normal button into rounded corner Property: showRoundedCorner

<button ej-button id="btn" text="Button" [showRoundedCorner]="true"></button> 		Not applicable
Specifies the width of the button Property: width

<button ej-button id="btn" text="Button" width="150px"></button> 		Not applicable
Specifies the height of the button Property: height

<button ej-button id="btn" text="Button" height="50px"></button> 		Not applicable
Adds HTML attributes to the button Property: htmlAttributes

<button ej-button id="btn" text="Button" [htmlAttributes]="attributes"></button> 		Not applicable
Allows the appearance of the Button to be enhanced and visually appealing Not applicable Property: isPrimary

<button ejs-button id="btn" isPrimary="true" content="Button"></button>
Makes the button toggle from normal to active state Property: isToggle

Not applicable		 Property: isToggle

<button ejs-button id="btn" isToggle="true" content="Play"></button>
Specifies the disabled state of the button Property: enabled

<button ej-button id="btn" text="Button" [enabled]="false"></button> 		Property: disabled

<button ejs-button id="btn" [disabled]="true" content="Button"></button>
Enable or disable rendering component in right to left direction Property: enableRTL

<button ej-button id="btn" contentType="TextAndImage" text="Save" prefixIcon="e-icon e-save" [enableRTL]="true"></button> 		Property: enableRtl

<button ejs-button id="btn" [enableRtl]="true" content="Save" iconCss="e-icons e-save"></button>

Methods

Behavior API in Essential JS 1 API in Essential JS 2
Destroys the control Methods: destroy

<button ej-button #btn id="btn" text="Button"></button>
@ViewChild(‘btn’)
public btnObj: ButtonComponent;
this.btnObj.destroy();		 Methods: destroy

<button ejs-button #btn id="btn" content="Button"></button>
@ViewChild(‘btn’)
public btnObj: ButtonComponent;
this.btnObj.destroy();
Disables the button Methods: disable

<button ej-button #btn id="btn" text="Button"></button>
@ViewChild(‘btn’)
public btnObj: ButtonComponent;
this.btnObj.disable();		 Not applicable
Enables the button Methods: enable

<button ej-button #btn id="btn" text="Button"></button>
@ViewChild(‘btn’)
public btnObj: ButtonComponent;
this.btnObj.enable();		 Not applicable

Events

Behavior API in Essential JS 1 API in Essential JS 2
Triggers while clicking the button Events: click

<button ej-button id="btn" text="Button" (click)="btnClick($event)"></button>
btnClick(args) {
/** code block */
}		 Not applicable
Triggers once the component rendering is completed Events: create

<button ej-button id="btn" text="Button" (click)="create($event)"></button>
create(args) {
/** code block */
}		 Events: created

<button ejs-button id="btn" content="Button" (created)="created()"></button>
created() {
/** code block */
}
Triggers once the component is destroyed Events: destroy

<button ej-button id="btn" text="Button" (destroy)="destroy($event)"></button>
destroy(args) {
/** code block */
}		 Not applicable