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