Groups in Angular TextBox component

26 Oct 20247 minutes to read

The following section explains you the steps required to create TextBox with icon and floating label.

Floating label:

To add the Floating label by using FloatLabelType property. Specifies the floating label behavior of the TextBox that the placeholder text floats above the TextBox based on the below values. Possible values are:

  • Never - The placeholder text should not be float ever.
  • Always - The placeholder text floats above the TextBox always.
  • Auto - The placeholder text floats above the TextBox while focusing or enter a value in TextBox.
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: ` <ejs-textbox placeholder="Enter Name" floatLabelType="Auto"></ejs-textbox>`
})

export class AppComponent { }

And refer to the following sections to add the icons to the TextBox.

With icon and floating label

Create an icon in the TextBox using the addIcon method and enable the float label using the FloatLabelType property. The user can place the icon on either side of the TextBox by specifying “append” or “prepend” in the addIcon method.

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));

With clear button and floating label

The clear button is added to the input for clearing the value given in the TextBox.
It is shown only when the input field has a value, otherwise not shown.

You can add the clear button to the TextBox by using showClearButton API in TextBox.

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));

Multi-line Input with Floating Label

To create a multiline input using the multiline API, it will act as a TextArea component. You can also resize the rows.

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

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


standalone: true,
    selector: 'app-root',
    template: `<ejs-textbox placeholder="Address" multiline=true></ejs-textbox>`
})

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

See Also