Ej1 api migration in Angular Check box component

15 Sep 20225 minutes to read

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

Properties

Behavior API in Essential JS 1 API in Essential JS 2
Checkbox label Property: text

<ej-checkbox id="checkbox" text="Checkbox"></ej-checkbox> 		Property: label

<ejs-checkbox id="checkbox" label="Checkbox"></ejs-checkbox>
Checked state Property: enableTriState and checkState

<ej-checkbox id="checkbox" [enableTriState]="true" text="Checked state" checkState="check"></ej-checkbox> 		Property: checked

<ejs-checkbox id="checkbox" [checked]="true" label="Checked state"></ejs-checkbox>
Indeterminate state Property: enableTriState and checkState

<ej-checkbox id="checkbox" text="Indeterminate state" [enableTriState]="true" checkState="indeterminate"></ej-checkbox> 		Property: indeterminate

<ejs-checkbox id="indeterminate" [indeterminate]="true" label="Intermediate state"></ejs-checkbox>
Adding custom class Property: cssClass

<ej-checkbox id="checkbox" text="Checkbox" cssClass="custom-class"></ej-checkbox> 		Property: cssClass

<ejs-checkbox id="checkbox" cssClass="custom-class" label="Checkbox"></ejs-checkbox>
Label position Not applicable Property: labelPosition

<ejs-checkbox id="checkbox" label="Checkbox" labelPosition="Before"></ejs-checkbox>
Disabled state Property: enabled

<ej-checkbox id="checkbox" text="Checkbox" [enabled]="false"></ej-checkbox> 		Property: disabled

<ejs-checkbox id="checkbox" label="Checkbox" disabled="true"></ejs-checkbox>
State persistence Property: enablePersistence

<ej-checkbox id="checkbox" text="Checkbox" [enablePersistence]="true"></ej-checkbox> 		Property: enablePersistence

<ejs-checkbox id="checkbox" label="Checkbox" [enablePersistence]="true"></ejs-checkbox>
RTL Property: enableRTL

<ej-checkbox id="checkbox" text="Checkbox" [enableRTL]="true"></ej-checkbox> 		Property: enableRtl

<ejs-checkbox id="checkbox" label="Checkbox" [enableRtl]="true"></ejs-checkbox>
HTML Attributes Property: htmlAttributes

<ej-checkbox id="checkbox" text="Checkbox" [htmlAttributes]="attributes"></ej-checkbox> 		Not applicable
Id property Property: id

<ej-checkbox id="checkbox" text="sync"></ej-checkbox> 		Not applicable
Prefix value of Id Property: idPrefix

<ej-checkbox id="checkbox" text="Checkbox" idPrefix="ng"/> 		Not applicable
Name attribute Property: name

<ej-checkbox id="checkbox" name="conformation"></ej-checkbox> 		Property: name

<ejs-checkbox id="checkbox" name="conformation"></ejs-checkbox>
Value attribute Property: value

<ej-checkbox id="checkbox" name="conformation" value="Received"></ej-checkbox> 		Property: value

<ejs-checkbox id="checkbox" name="conformation" value="Received"></ejs-checkbox>
Show rounded corner Property: showRoundedCorner

<ej-checkbox id="checkbox" text="Checkbox" [showRoundedCorner]="true"></ej-checkbox> 		Not applicable
Size Property: size

<ej-checkbox id="checkbox" text="Small" size="small"></ej-checkbox> 		Property: cssClass

<ejs-checkbox id="checkbox" cssClass="e-small" label="Checkbox"></ejs-checkbox>
Validation rules Property: validationRules

<ej-checkbox id="checkbox" [validationRules]="rules"></ej-checkbox> 		Not applicable
Validation message Property: validationMessage

<ej-checkbox id="checkbox" [validationRules]="rules" [validationMessage]="message"></ej-checkbox> 		Not applicable

Methods

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

<ej-checkbox #checkbox id="checkbox" text="Checkbox"></ej-checkbox>
@ViewChild(‘checkbox’)
public checkbox: CheckBoxComponent;
this.checkbox.destroy();		 Method: destroy

<ejs-checkbox #checkbox id="checkbox" label="Checkbox"></ejs-checkbox>
@ViewChild(‘checkbox’)
public checkbox: CheckBoxComponent;
this.checkbox.destroy();
Disable the Checkbox Method: disable

<ej-checkbox #checkbox id="checkbox" text="Checkbox"></ej-checkbox>
@ViewChild(‘checkbox’)
public checkbox: CheckBoxComponent;
this.checkbox.disable();		 Not applicable
Enable the Checkbox Method: enable

<ej-checkbox #checkbox id="checkbox" text="Checkbox"></ej-checkbox>
@ViewChild(‘checkbox’)
public checkbox: CheckBoxComponent;
this.checkbox.enable();		 Not applicable
Check state of the Checkbox Method: isChecked

<ej-checkbox #checkbox id="checkbox" text="Checkbox"></ej-checkbox>
@ViewChild(‘checkbox’)
public checkbox: CheckBoxComponent;
this.checkbox.isChecked();		 Not applicable

Events

Behavior API in Essential JS 1 API in Essential JS 2
BeforeChange Event Events: beforeChange

ej-checkbox id="checkbox" text="Checkbox" (beforeChange)="beforeChange($event)"></ej-checkbox>
beforeChange(args) {
    /** code block */
}		 Not applicable
Change Event Events: change

<ej-checkbox id="checkbox" text="Checkbox" (change)="change($event)"></ej-checkbox>
change(args) {
    /** code block */
}		 Events: change

<ejs-checkbox id="checkbox" label="Checkbox" (change)="change($event)"></ejs-checkbox>
change(args) {
    /** code block */
}
created Event Events: create

<ej-checkbox id="checkbox" text="Checkbox" (create)="create($event)"></ej-checkbox>
create(args) {
    /** code block */
}		 Events: created

<ejs-checkbox id="checkbox" label="Checkbox" (created)="created()"></ejs-checkbox>
function created() {
    /** code block */
}
Destroy Event Events: destroy

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