Migration from css textbox to angular textbox in Angular Textbox component

4 Apr 20232 minutes to read

From v16.3.21 version, the textbox is provided as Angular component to achieve the floating label textbox with minimal code. You can find the available textbox properties, methods, and events in the API reference.

The following table describes the migration from CSS textbox to Angular textbox component.

Normal textbox

Rendering mode	CSS textbox	Angular textbox component
Default rendering	<div class='e-input-group'> <input class='e-input' type='text' placeholder='Enter Value'/> </div>	<ejs-textbox id="default" placeholder="Enter Value" floatLabelType="Never"></ejs-textbox>
Textbox with clear button	<div class='e-input-group'> <input class='e-input' placeholder='Enter Value' required='true'> <span class='e-clear-icon'></span> </div> Note: You have to write action for clear button.	<ejs-textbox id="clear-input" placeholder="Enter Value" floatLabelType="Never" [showClearButton]="true"></ejs-textbox>
Validation states	<div class='e-input-group e-error'> <input class='e-input' type='text' placeholder='Enter Value' /> </div> Note: Textbox component consists of three types of validation rules such as success, warning, and error.	<ejs-textbox id="validation" placeholder="Enter Value" floatLabelType="Never" cssClass="e-error"></ejs-textbox>

Floating label textbox

Rendering mode	CSS textbox	Angular textbox component
Default rendering	<div class='e-float-input'> <input type='text' required /> <span class='e-float-line'></span> <label class='e-float-text'>Enter Value</label> </div>	<ejs-textbox id="default" placeholder="Enter Value" floatLabelType="Auto"></ejs-textbox>
Textbox with clear button	<div class='e-float-input e-input-group'> <input type='text' required value= 'Clear Input' /> <span class='e-float-line'></span> <label class='e-float-text'>Enter Value</label> <span class='e-clear-icon'></span> </div> Note: You have to write action for clear button.	<ejs-textbox id="clear-input" placeholder="Enter Value" floatLabelType="Auto" [showClearButton]="true"></ejs-textbox>
Validation states	<div class='e-float-input e-error'> <input type='text' required /> <span class='e-float-line'></span> <label class='e-float-text'>Enter Value</label> </div> Note: Textbox component consists of three types of validation rules such as success, warning, and error.	<ejs-textbox id="validation" placeholder="Enter Value" floatLabelType="Auto" cssClass="e-error"></ejs-textbox>