Getting started with Angular TextBox component

21 Aug 20259 minutes to read

The Angular TextBox component is an enhanced HTML input element that provides features like floating labels, input validation, icons, and customizable styling. This guide walks through creating a simple TextBox in an Angular application.

To get started quickly with Angular TextBox component, you can check out this video:

Prerequisites

Before getting started, ensure you have:

Node.js installed (version 14 or later)
Basic knowledge of Angular and TypeScript
Angular CLI installed globally

Dependencies

The TextBox component requires the following dependencies in your application:

|-- @syncfusion/ej2-angular-inputs
    |-- @syncfusion/ej2-angular-base
    |-- @syncfusion/ej2-inputs
        |-- @syncfusion/ej2-base

Set up Angular environment

Angular provides an efficient way to create projects using the Angular CLI tool.

Install the CLI application globally:

npm install -g @angular/cli

Create a new application

Create a new Angular project:

ng new syncfusion-angular-textbox

To set up the project with SCSS styling, use the style flag:

ng new syncfusion-angular-textbox --style=scss

Navigate to the project directory:

cd syncfusion-angular-textbox

Install Syncfusion TextBox package

Syncfusion packages are distributed as @syncfusion scoped packages on npm. The library provides two package formats to support different Angular versions.

For Angular 12 and above (Ivy distribution)

Syncfusion Angular packages (version 20.2.36 and later) use Ivy distribution format, compatible with Angular’s modern rendering engine.

Install the TextBox package:

npm install @syncfusion/ej2-angular-inputs --save

For Angular versions below 12 (ngcc compatibility)

For older Angular versions, use the legacy compilation package:

npm install @syncfusion/ej2-angular-inputs@ngcc --save

In your package.json, specify the ngcc version:

@syncfusion/ej2-angular-inputs: "20.2.38-ngcc"

Note: Installing without the ngcc tag on older Angular versions will install the Ivy package and display compatibility warnings.

Add TextBox to the application

Integrate the TextBox component into your application by importing the module and using the component selector.

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

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

Add CSS references

Import the required CSS files in your src/styles.css file:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

Tip: Use the Custom Resource Generator (CRG) to create optimized, combined CSS and JavaScript files for your specific component requirements.

Add icons to TextBox

Enhance the TextBox with icons using the addIcon method within the created event:

Parameter	Type	Description
position	string	Specifies the icon placement. Possible values: append, prepend.
icons	string or string[]	CSS classes for the icon(s) to be added. These are applied to a span element that acts as an icon or button.

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

@Component({
    imports: [TextBoxModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-textbox #textbox placeholder="Enter Date" (created)="onCreate($event)"></ejs-textbox>`
})
export class AppComponent {
    @ViewChild('textbox')
    public textboxObj!: TextBoxComponent;

    public onCreate(args: any) {
        (this.textboxObj as any).addIcon('append', 'e-icons e-input-popup-date');
    }
}

.e-input-group-icon.e-input-popup-date::before {
    content: "";
}

Run the application

Start the development server to view your TextBox component:

ng serve

The application will open in your default browser, displaying the TextBox component.

app.component.ts
main.ts
import { FormsModule } from '@angular/forms'
import { TextBoxComponent, TextBoxModule } from '@syncfusion/ej2-angular-inputs';


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

@Component({
imports: [
        TextBoxModule,
        FormsModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <h4> TextBox with icons </h4>
                <ejs-textbox #textbox placeholder = "Enter Date" (created)="onCreate($event)"></ejs-textbox>
                <ejs-textbox #textbox1 placeholder = "Enter Date" (created)="onCreate1($event)"></ejs-textbox>
                <ejs-textbox #textbox2 placeholder = "Enter Date" (created)="onCreate2($event)"></ejs-textbox>

                <h4> Floating label with icons </h4>
                <ejs-textbox #textbox3 placeholder = "Enter Date" floatLabelType="Auto" (created)="onCreate3($event)"></ejs-textbox>
                <ejs-textbox #textbox4 placeholder = "Enter Date" floatLabelType="Auto" (created)="onCreate4($event)"></ejs-textbox>
                <ejs-textbox #textbox5 placeholder = "Enter Date" floatLabelType="Auto" (created)="onCreate5($event)"></ejs-textbox>
              </div>`
})

export class AppComponent {
    @ViewChild('textbox')
    public textboxObj!: TextBoxComponent;
    @ViewChild('textbox1')
    public textboxObj1!: TextBoxComponent;
    @ViewChild('textbox2')
    public textboxObj2!: TextBoxComponent;
    @ViewChild('textbox3')
    public textboxObj3!: TextBoxComponent;
    @ViewChild('textbox4')
    public textboxObj4!: TextBoxComponent;
    @ViewChild('textbox5')
    public textboxObj5!: TextBoxComponent;

    public onCreate(args: any) {
        (this.textboxObj as any).addIcon('append', 'e-icons e-input-popup-date');
    }
    public onCreate1(args: any) {
        (this.textboxObj1 as any).addIcon('prepend', 'e-icons e-input-popup-date');
    }
    public onCreate2(args: any) {
        (this.textboxObj2 as any).addIcon('prepend', 'e-icons e-input-down');
    }
    public onCreate3(args: any) {
        (this.textboxObj3 as any).addIcon('append', 'e-icons e-input-popup-date');
    }
    public onCreate4(args: any) {
        (this.textboxObj4 as any).addIcon('prepend', 'e-icons e-input-popup-date');
    }
    public onCreate5(args: any) {
        (this.textboxObj5 as any).addIcon('prepend', 'e-icons e-input-down');
    }
 }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Floating label

The floating label feature displays the label above the TextBox when focused or when the input contains a value. Configure floating labels using the FloatLabelType property:

Available FloatLabelType values:

Never - The placeholder text remains static and does not float above the TextBox
Always - The placeholder text permanently floats above the TextBox regardless of focus or input state
Auto - The placeholder text dynamically floats above the TextBox when the field receives focus or contains a value

app.component.ts
main.ts
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>Floating label as auto</h4>
    <div class='textboxes'>
      <ejs-textbox placeholder="First Name" floatLabelType="Auto"></ejs-textbox>
    </div>

    <h4>Floating label as always</h4>
    <div class='textboxes'>
      <ejs-textbox placeholder="First Name" floatLabelType="Always"></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));

Troubleshooting

Package installation issues: Ensure you’re using the correct package version for your Angular version (Ivy for Angular 12+ or ngcc for earlier versions).

Styling not applied: Verify that CSS imports are correctly added to src/styles.css and the paths match your node_modules structure.

Component not rendering: Check that the TextBoxModule is properly imported in your component or module.