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 |