This article describes the API migration process of Button component from Essential JS 1 to Essential JS 2.
| 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> |
| 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 |
| 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 |