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 |