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 |