Ej1 api migration in Angular Numerictextbox component

4 Apr 20239 minutes to read

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

Common

Behavior API in Essential JS 1 API in Essential JS 2
Triggers on creation Event create

<input id="numeric" type="text" ej-numerictextbox value="120" (create)="onCreate()"/>

script
onCreate() {} 		Event: created

<ejs-numerictextbox value="120" (created)="onCreate()"></ejs-numerictextbox>

script
public onCreate(): void {}
Adding custom classes Property cssClass

<input id="numeric" type="text" ej-numerictextbox value="120" cssClass="custom"/> 		Property: cssClass

<ejs-numerictextbox value="120" cssClass="custom"></ejs-numerictextbox>
Triggers when editor is destroyed Event destroy

<input id="numeric" type="text" ej-numerictextbox value="120" (destroy)="onDestroy()"/>

script
onDestroy() {} 		Event: destroyed

<ejs-numerictextbox value="120" (destroyed)="onDestroy()"></ejs-numerictextbox>

script
public onDestroy(): void {}
Destroys textbox Method destroy

<input id="numeric" type="text" ej-numerictextbox value="100"/>
var numericObj = $("#numeric").data("ejNumericTextbox");
numericObj.destroy(); 		Method: destroy

<ejs-numerictextbox value="100" #numeric></ejs-numerictextbox>
@ViewChild("numeric") numeric: NumericTextBoxComponent;
numeric.destroy();
Control state Property enabled

<input id="numeric" type="text" ej-numerictextbox value="100" enabled=false/> 		Property: enabled

<ejs-numerictextbox value="100" enabled=false></ejs-numerictextbox>
Persistence Property enablePersistence

<input id="numeric" type="text" ej-numerictextbox value="100" enablePersistence=true/> 		Property: enablePersistence

<ejs-numerictextbox value="100" enablePersistence=true></ejs-numerictextbox>
Right To Left Property enableRTL

<input id="numeric" type="text" ej-numerictextbox value="100" enableRTL=true/> 		Property: enableRtl

<ejs-numerictextbox value="100" enableRtl=true></ejs-numerictextbox>
Triggers when editor is focused in Event focusIn

<input id="numeric" type="text" ej-numerictextbox value="20" (focusIn)="onFocusIn()"/>

script
onFocusIn() {} 		Event: focus

<ejs-numerictextbox value='12345'(focus) = "onFocus()"></ejs-numerictextbox>

script
public onFocus(): void {}
Triggers when editor is focused out Event focusOut

<input id="numeric" type="text" ej-numerictextbox value="100" (focusOut)="onFocusOut()"/>

script
onFocusOut() {} 		Event: blur

<ejs-numerictextbox value='12345'(blur) = "onBlur()"></ejs-numerictextbox>

script
public onBlur(): void {}
Sets Height Property height

<input id="numeric" type="text" ej-numerictextbox value="100" height="40px"/> 		Can be achieved using,

<ejs-numerictextbox value="100" cssClass="custom"></ejs-numerictextbox>
Css
.e-numerictextbox.custom{
height: 40px;
}
HTML Attributes Property htmlAttributes

<input id="numeric" type="text" ej-numerictextbox value="100" [htmlAttributes]= "htmlAttr" />

script
constructor() {
this.htmlAttr = {name: "numerictextbox"};
} 		Can be achieved using
script
<ejs-numerictextbox #numeric value="1234" name="numerictextbox"></ejs-numerictextbox>
Name of editor Property name

<input id="numeric" type="text" ej-numerictextbox value="100" name="textbox"/> 		Can be achieved using
script
<ejs-numerictextbox #numeric value="1234" name="numerictextbox"></ejs-numerictextbox>
Read only Property readOnly

<input id="numeric" type="text" ej-numerictextbox value="80" readOnly=true/> 		Property: readonly

<ejs-numerictextbox value="80" readonly=true></ejs-numerictextbox>
Rounded corners Property showRoundedCorner

<input id="numeric" type="text" ej-numerictextbox value="80" showRoundedCorner=true/> 		Can be achieved using
script
<ejs-numerictextbox #numeric value="1234" floatLabelType="Always" cssClass="e-style"></ejs-numerictextbox>
CSS
.e-control-wrapper.e-numeric.e-input-group.e-style {
border: 2.5px solid;
border-radius: 1rem;
padding-left: 12px;
}
.e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::before, .e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::after{
background: none ;
}
.e-control-wrapper.e-numeric.e-input-group.e-style.e-input-focus{
border: solid grey !important;
}
Spin Button Property showSpinButton

<input id="numeric" type="text" ej-numerictextbox value="20" showSpinButton=false/> 		Property: showSpinButton

<ejs-numerictextbox value="20" showSpinButton=false></ejs-numerictextbox>
Width Property width

<input id="numeric" type="text" ej-numerictextbox value="20" width="220px"/> 		Property: width

<ejs-numerictextbox value="20" width="220px"></ejs-numerictextbox>
Clear Button Not Applicable Property: showClearButton

<ejs-numerictextbox value="100" showClearButton=true></ejs-numerictextbox>

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Localization culture Property locale

<input id="numeric" type="text" ej-numerictextbox value="80" locale="de-DE"/> 		Property: locale

<ejs-numerictextbox value="80" locale="de-DE"></ejs-numerictextbox>

Group

Behavior API in Essential JS 1 API in Essential JS 2
Group digits in editor Property groupSize

<input id="numeric" type="text" ej-numerictextbox value="100" groupSize="2"/> 		Not Applicable
Group Separator Property groupSeparator

<input id="numeric" type="text" ej-numerictextbox value="100" groupSeparator="-"/> 		Not Applicable

Numeric configuration

Behavior API in Essential JS 1 API in Essential JS 2
Triggers on value change Event change

<input id="numeric" type="text" ej-numerictextbox value="120" (change)="onChange()"/>

script
onChange() {} 		Event: change

<ejs-numerictextbox value="120" (change)="onChange()"></ejs-numerictextbox>

script
public onChange(): void {}
Sets digits allowed after decimal point Property decimalPlaces

<input id="numeric" type="text" ej-numerictextbox value="100" decimalPlaces="2"/> 		Property: decimals

<ejs-numerictextbox value="80" format="n2" decimals="2"></ejs-numerictextbox>
Decrement value Not Applicable Method: decrement

<ejs-numerictextbox #numeric value="100"></ejs-numerictextbox>
@ViewChild("numeric") numeric: NumericTextBoxComponent;
numeric.decrement();
Disable the textbox Method disable

<input id="numeric" type="text" ej-numerictextbox value="200"/>
var numericObj = $("#numeric").data("ejNumericTextbox");
numericObj.disable(); 		Can be achieved using
script
<ejs-numerictextbox #numeric value="1234"></ejs-numerictextbox>
@ViewChild("numeric") numeric: NumericTextBoxComponent;
numeric.enabled = false;
Enable the textbox Method enable

<input id="numeric" type="text" ej-numerictextbox value="200"/>
var numericObj = $("#numeric").data("ejNumericTextbox");
numericObj.enable(); 		Can be achieved using
script
<ejs-numerictextbox #numeric value="1234"></ejs-numerictextbox>
@ViewChild("numeric") numeric: NumericTextBoxComponent;
numeric.enabled = true;
Gets value of editor Method getValue

<input id="numeric" type="text" ej-numerictextbox value="100"/>
var numericObj = $("#numeric").data("ejNumericTextbox");
numericObj.getValue(); 		Method: getText

<ejs-numerictextbox value="100" #numeric></ejs-numerictextbox>
@ViewChild("numeric") numeric: NumericTextBoxComponent;
numeric.getText();
Increment value Not Applicable Method: increment

<ejs-numerictextbox #numeric value="80"></ejs-numerictextbox>
@ViewChild("numeric") numeric: NumericTextBoxComponent;
numeric.increment();
Step value Property incrementStep

<input id="numeric" type="text" ej-numerictextbox value="100" incrementStep="2"/> 		Property: step

<ejs-numerictextbox value="100" step="2"></ejs-numerictextbox>
Sets Maximum value Property maxValue

<input id="numeric" type="text" ej-numerictextbox value="100" maxValue="200"/> 		Property: max

<ejs-numerictextbox value="100" max="200"></ejs-numerictextbox>
Sets Minimum value Property minValue

<input id="numeric" type="text" ej-numerictextbox value="100" minValue="20"/> 		Property: min

<ejs-numerictextbox value="100" min="20"></ejs-numerictextbox>
Negative pattern for formatting values Property negativePattern

<input id="numeric" type="text" ej-numerictextbox value="-20" negativePattern: "( n)"/> 		Not Applicable
Positive pattern for formatting values Property positivePattern

<input id="numeric" type="text" ej-numerictextbox value="20" positivePattern: "n kg"/> 		Not Applicable
Specifies value Property value

<input id="numeric" type="text" ej-numerictextbox value="100" /> 		Property: value

<ejs-numerictextbox value="100"></ejs-numerictextbox>
Displays hint on editor Property watermarkText

<input id="numeric" type="text" ej-numerictextbox value="80" watermarkText="Enter value" /> 		Property: placeholder

<ejs-numerictextbox value="100" placeholder="Enter value"></ejs-numerictextbox>
Placeholder float type Not Applicable Property: floatLabelType

<ejs-numerictextbox value="200" placeholder="Enter value" floatLabelType="Auto"></ejs-numerictextbox>

Number Formats

Behavior API in Essential JS 1 API in Essential JS 2
Set Currency symbol Property currencySymbol

<input id="currency" type="text" ej-currencytextbox value="100" currencySymbol="EUR"> 		Property: currency

<ejs-numerictextbox value="100" format="c2" currency="EUR"></ejs-numerictextbox>
Number Format Not Applicable Property: format

<ejs-numerictextbox value="200" format="n2"></ejs-numerictextbox>

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Strict Mode Property enableStrictMode

<input id="numeric" type="text" ej-numerictextbox value="80" enableStrictMode=true /> 		Property: strictMode

<ejs-numerictextbox value="80" strictMode=true></ejs-numerictextbox>
Validation on typing Property validateOnType

<input id="numeric" type="text" ej-numerictextbox value="80" validateOnType=true /> 		Property: validateDecimalOnType

<ejs-numerictextbox value="100" validateDecimalOnType=true></ejs-numerictextbox>
Validation Message Property validationMessage

<input id="numeric" type="text" ej-numerictextbox value="100" />

script
constructor() {
this.validationRules = {required: true};
this.validationMessage = {required: "Required value"}
} 		Can be achieved using Form Validator
<form #formElement class="form-horizontal">
<ejs-numerictextbox #numeric="" id="numeric" (created)="onCreate($event)" (change)= "onChange($event)"></ejs-numerictextbox>
</form>
let options: FormValidatorModel = {
rules: {
'numericRange': { required: [true, "Number is required"] },
},
customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
inputElement.parentNode.parentNode.parentNode.appendChild(errorElement);
}
};
this.formObject = new FormValidator(this.element.nativeElement, options);
public onCreate(){
document.getElementById("numeric").setAttribute("name", "numericRange");
}
Validation Rules Property validationRules

<input id="numeric" type="text" ej-numerictextbox value="100" />
constructor() {

script
this.validationRules = {required: true};
} 		Can be achieved using Form Validator
<form #formElement class="form-horizontal">
<ejs-numerictextbox #numeric="" id="numeric" (created)="onCreate($event)" (change)= "onChange($event)"></ejs-numerictextbox>
</form>
let options: FormValidatorModel = {
rules: {
'numericRange': { required: [true] },
},
customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
inputElement.parentNode.parentNode.parentNode.appendChild(errorElement);
}
};
this.formObject = new FormValidator(this.element.nativeElement, options);
public onCreate(){
document.getElementById("numeric").setAttribute("name", "numericRange");
}