Ej1 api migration in Angular Radio button component

15 Sep 20225 minutes to read

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

Properties

Behavior API in Essential JS 1 API in Essential JS 2
Label Property: text

<input type="radio" ej-radiobutton id="radio" text="RadioButton" /> 		Property: label

<ejs-radiobutton id="radio" label="RadioButton"></ejs-radiobutton>
Checked state Property: checked

<input type="radio" ej-radiobutton id="radio" text="RadioButton" [checked]="true" /> 		Property: checked

<ejs-radiobutton id="radio" label="RadioButton" [checked]="true"></ejs-radiobutton>
Adding custom css class Property: cssClass

<input type="radio" ej-radiobutton id="radio" text="RadioButton" cssClass="custom-class" /> 		Property: cssClass

<ejs-radiobutton id="radio" label="RadioButton" cssClass="custom-class"></ejs-radiobutton>
Disabled state Property: enabled

<input type="radio" ej-radiobutton id="radio" text="RadioButton" [enabled]="false" /> 		Property: disabled

<ejs-radiobutton id="radio" label="RadioButton" [disabled]="true"></ejs-radiobutton>
State persistence Property: enablePersistence

<input type="radio" ej-radiobutton id="radio" text="RadioButton" [enablePersistence]="true" /> 		Property: enablePersistence

<ejs-radiobutton id="radio" label="RadioButton" [enablePersistence]="true"></ejs-radiobutton>
RTL Property: enableRTL

<input type="radio" ej-radiobutton id="radio" text="RadioButton" [enableRTL]="true" /> 		Property: enableRtl

<ejs-radiobutton id="radio" label="RadioButton" [enableRtl]="true"></ejs-radiobutton>
HTML Attributes Property: htmlAttributes

<input type="radio" ej-radiobutton id="radio" text="RadioButton" [htmlAttributes]="attributes" /> 		Not applicable
Id property Property: id

<input type="radio" ej-radiobutton id="sync" /> 		Not applicable
Prefix value of Id Property: idPrefix

<input type="radio" ej-radiobutton idPrefix="ng" /> 		Not applicable
Name attribute Property: name

<input type="radio" ej-radiobutton id="radio" name="gender" [checked]="true" text="Male" /> 		Property: name

<ejs-radiobutton id="radio" name="gender" [checked]="true" label="Male"></ejs-radiobutton>
Value attribute Property: value

<input type="radio" ej-radiobutton id="radio" name="gender" [checked]="true" value="male" text="Male" /> 		Property: value

<ejs-radiobutton id="radio" name="gender" [checked]="true" value="male" label="Male"></ejs-radiobutton>
Size Property: size

<input type="radio" ej-radiobutton id="radio" size="small" text="RadioButton" /> 		Property: cssClass

<ejs-radiobutton id="radio" label="RadioButton" cssClass="e-small"></ejs-radiobutton>
Validation rules Property: validationRules

<input type="radio" ej-radiobutton id="radio" text="RadioButton" [validationRules]="rules" /> 		Not applicable
Validation message Property: validationMessage

<input type="radio" ej-radiobutton id="radio" text="RadioButton" [validationRules]="rules" [validationMessage]="message" /> 		Not applicable

Methods

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

<input #radio type="radio" ej-radiobutton id="radio" text="RadioButton" />
@ViewChild(‘radio’)
public radioButton: RadioButtonComponent;
this.radioButton.destroy();		 Method: destroy

<ejs-radiobutton #radio id="radio" label="RadioButton"></ejs-radiobutton>
@ViewChild(‘radio’)
public radioButton: RadioButtonComponent;
this.radioButton.destroy();
Disable the RadioButton Method: disable

<input #radio type="radio" ej-radiobutton id="radio" text="RadioButton" />
@ViewChild(‘radio’)
public radioButton: RadioButtonComponent;
this.radioButton.disable();		 Not applicable
Enable the RadioButton Method: enable

<input #radio type="radio" ej-radiobutton id="radio" text="RadioButton" />
@ViewChild(‘radio’)
public radioButton: RadioButtonComponent;
this.radioButton.enable();		 Not applicable

Events

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

<input type="radio" ej-radiobutton id="radio" text="RadioButton" (beforeChange)="beforeChange($event)" />
beforeChange(args) {
    /** code block */
}		 Not applicable
Change Event Event: change

<input type="radio" ej-radiobutton id="radio" text="RadioButton" (change)="change($event)" />
change(args) {
    /** code block */
}		 Event: change

<ejs-radiobutton id="radio" label="RadioButton" (change)="change($event)"></ejs-radiobutton>
change(args) {
    /** code block */
}
Create Event Event: create

<input type="radio" ej-radiobutton id="radio" text="RadioButton" (create)="create($event)" />
create(args) {
    /** code block */
}		 Event: created

<ejs-radiobutton id="radio" label="RadioButton" (created)="created()"></ejs-radiobutton>
created() {
    /** code block */
}
Destroy Event Event: destroy

<input type="radio" ej-radiobutton id="radio" text="RadioButton" (destroy)="destroy($event)" />
destroy(args) {
    /** code block */
}		 Not applicable