Configure TextBox options in Angular TextBox

21 Aug 202513 minutes to read

The Syncfusion Angular TextBox component provides essential features to enhance user experience, including a built-in clear button for quick input reset and the ability to configure custom HTML attributes. This guide covers these primary features along with additional state management capabilities.

Add a clear button to the TextBox

The TextBox component includes a clear button feature that allows users to quickly reset the input value with a single click. The clear button automatically appears when the field contains text and disappears when the field is empty, providing a clean and intuitive user interface.

To enable the clear button functionality, set the showClearButton property to true.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import {TextBoxModule} from '@syncfusion/ej2-angular-inputs'



import { Component } from '@angular/core';

@Component({
imports: [
        
        TextBoxModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
    <h4>Textbox with clear icon</h4>
    <div class='textboxes'>
        <ejs-textbox placeholder="First Name" showClearButton='true' floatLabelType="Never"></ejs-textbox>
    </div>

    <h4>Floating Textbox with clear icon</h4>
    <div class='textboxes'>
        <ejs-textbox placeholder="Last Name" showClearButton='true' floatLabelType="Auto"></ejs-textbox>
    </div>
    </div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Set HTML attributes

The TextBox component supports standard HTML attributes through the htmlAttributes property. This property accepts an object where keys represent attribute names and values represent the corresponding attribute values, allowing developers to add attributes such as name, type, maxlength, placeholder, title, and others directly to the input element.

When an attribute is configured through both a dedicated component property and the htmlAttributes object, the component prioritizes the value set in the dedicated property.

The following example demonstrates how to configure common HTML attributes for a TextBox:

import { Component } from '@angular/core';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [TextBoxModule],
    standalone: true,
    selector: 'app-root',
    template: `
    <div style="margin-left: 25%; width: 240px; margin-top: 40px;">
        <h4>TextBox with HTML attributes</h4>
        <ejs-textbox [htmlAttributes]="htmlAttributes" placeholder="Enter password"></ejs-textbox>
    </div>
    `
})
export class AppComponent {
    public htmlAttributes: { [key: string]: string } = {
        name: 'userpassword',
        type: 'password',
        maxlength: '12',
        title: 'Enter your password'
    };
}

Configure TextBox states

Set the disabled state

To disable the TextBox and prevent user interaction, set the enabled property to false.

import { Component } from '@angular/core';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
imports: [
        TextBoxModule
    ],
standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <ejs-textbox placeholder="Enter Name" [enabled]="false"> </ejs-textbox>
                 <ejs-textbox placeholder="Enter Name" floatLabelType="Auto" [enabled]="false"> </ejs-textbox>
              </div>`
})

export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Set the read-only state

To make the TextBox read-only while maintaining its visual appearance and allowing text selection, set the readonly property to true.

import { Component } from '@angular/core';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
imports: [
        TextBoxModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <ejs-textbox placeholder="Enter Name" value="John" [readonly]="true"> </ejs-textbox>
                <ejs-textbox placeholder="Enter Name" floatLabelType="Auto" [readonly]="true"></ejs-textbox>
              </div>`
})

export class AppComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

TextBox methods

Focus management

Control the focus state of the TextBox programmatically using the focus methods:

  • Use focusIn to set focus to the TextBox
  • Use focusOut to remove focus from the TextBox
import { Component, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TextBoxComponent, TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
    imports: [TextBoxModule, FormsModule, ButtonModule],
    standalone: true,
    selector: 'app-root',
    template: `
        <div class="wrap">
            <ejs-textbox #textbox placeholder="Enter Name" floatLabelType="Auto"></ejs-textbox>
            <button ejs-button (click)='focusHandler()'>Focus In</button>
            <button ejs-button (click)='blurHandler()'>Focus Out</button>
        </div>
    `
})
export class AppComponent {
    @ViewChild('textbox')
    public textboxObj?: TextBoxComponent;

    public focusHandler(): void {
        this.textboxObj?.focusIn();
    }

    public blurHandler(): void {
        this.textboxObj?.focusOut();
    }
}

Component life cycle methods

Destroy the component

The destroy method removes the component from the DOM and detaches all event handlers while maintaining the original input element. This method is useful when dynamically removing TextBox components.

import { Component, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TextBoxComponent, TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
    imports: [TextBoxModule, FormsModule, ButtonModule],
    standalone: true,
    selector: 'app-root',
    template: `
        <div class="wrap">
            <ejs-textbox #textbox placeholder="Enter Name" floatLabelType="Auto"></ejs-textbox>
            <button ejs-button (click)='destroyHandler()'>Destroy</button>
        </div>
    `
})
export class AppComponent {
    @ViewChild('textbox')
    public textboxObj?: TextBoxComponent;

    public destroyHandler(): void {
        this.textboxObj?.destroy();
    }
}

Get persist data

The getPersistData method returns the properties that should be maintained in the persisted state. This is useful when implementing custom persistence logic.

import { Component, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TextBoxComponent, TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
    imports: [TextBoxModule, FormsModule, ButtonModule],
    standalone: true,
    selector: 'app-root',
    template: `
        <div class="wrap">
            <ejs-textbox #textbox placeholder="Enter Name" floatLabelType="Auto"></ejs-textbox>
            <button ejs-button (click)='getPersistDataHandler()'>Get Persist Data</button>
            <div></div>
        </div>
    `
})
export class AppComponent {
    @ViewChild('textbox')
    public textboxObj?: TextBoxComponent;
    public persistData: string|undefined;

    public getPersistDataHandler(): void {
        this.persistData = this.textboxObj?.getPersistData();
    }
}

Add textbox programmatically in Angular Textbox component

The Angular Textbox component can be created programmatically using the createInput method from the ej2-inputs library. This approach is useful when building dynamic forms or when textbox elements need to be generated based on runtime conditions.

Steps to create textbox programmatically

Follow these steps to create a textbox component programmatically:

Step 1: Import the Input module

Import the Input modules from the ej2-inputs library as shown below.

import {Input} from '@syncfusion/ej2-inputs';

Step 2: Create the textbox using createInput method

Pass the HTML Input element as a parameter to the createInput method. This method transforms a standard HTML input element into a Syncfusion Textbox component with enhanced styling and functionality.

Step 3: Add icons (optional)

Icons can be added to the input by passing the buttons property value with the class name e-input-group-icon as a parameter to the createInput method. This creates input groups with integrated icon buttons for enhanced user interaction.

Implementation example

The following example demonstrates how to create textbox components programmatically with and without icons:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'




import { Component } from '@angular/core';
import { Input } from '@syncfusion/ej2-inputs';

@Component({
imports: [
        
        FormsModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <input id="textbox" type="text" placeholder="Enter Name" />
                <input id="textbox-icon" type="text" />
               </div>`
})

export class AppComponent {
    ngOnInit() {
        let element: HTMLInputElement = document.getElementById('textbox') as HTMLInputElement;
        Input.createInput ({
            element: element
        });

        let element1: HTMLInputElement = document.getElementById('textbox-icon') as HTMLInputElement;
        Input.createInput ({
            element: element1,
            buttons: ['e-icons e-input-down'],
            properties: {
                placeholder:'Enter Value'
            }
        });
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Use cases

Programmatic textbox creation is particularly beneficial in the following scenarios:

  • Building dynamic forms where the number of input fields varies based on user selections
  • Creating input components in response to API data or configuration changes
  • Implementing custom form builders or survey applications
  • Adding textbox elements to dynamically generated content areas