Adornments in EJ2 Angular TextBox control

27 Dec 20256 minutes to read

Adornments allow you to add custom elements before or after the TextBox using prependTemplate and appendTemplate. These elements can include icons, text labels, or action buttons to improve usability and provide visual context.

Overview

Adornments are useful for:

  • Visual Context: Adding icons that indicate the expected input type (e.g., user icon for username, envelope icon for email)
  • Functional Enhancement: Including action buttons such as password visibility toggles or clear buttons
  • Input Validation: Displaying validation status icons or error indicators
  • Unit Indicators: Showing currency symbols, temperature units, domain extensions, or measurement units
  • Accessibility: Providing visual and interactive guidance to help users input and improve discoverability

Common Use Cases

  • Visual Indicators: Icons for expected input type (e.g., user icon for username, envelope icon for email).
  • Functional Enhancements: Buttons for password visibility toggle or clear input.
  • Validation Status: Icons for error or success indicators.
  • Unit Indicators: Currency symbols, measurement units, or domain extensions.

Adding Adornments to TextBox

Use prependTemplate and appendTemplate properties to add custom HTML content before and after the TextBox.

  • prependTemplate: Renders elements before the TextBox.
  • appendTemplate: Renders elements after the TextBox.

The following example demonstrates how to add adornments in the TextBox control.

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

@Component({
  selector: 'app-root',
  styleUrls: ['.././index.css'],
  template: `
    <div class="col-lg-12 control-section adornments">
      <div class="content-wrapper">
        <div class="row">
          <ejs-textbox
            placeholder="Enter your Name"
            cssClass="e-prepend-textbox"
            floatLabelType="Auto"
            [prependTemplate]="prependTemplate">
            <ng-template #prependTemplate>
              <span class="e-icons e-user"></span>
              <span class="e-input-separator"></span>
            </ng-template>
          </ejs-textbox>
        </div>

        <div class="row">
          <ejs-textbox
            placeholder="Password"
            cssClass="e-eye-icon"
            floatLabelType="Auto"
            [(value)]="password"
            [type]="passwordType"
            [appendTemplate]="appendTemplate">
            <ng-template #appendTemplate>
              <span class="e-input-separator"></span>
              <span
                class="e-icons"
                [class.e-eye]="passwordType === 'password'"
                [class.e-eye-slash]="passwordType === 'text'"
                (click)="onEyeIconClick($event)">
              </span>
            </ng-template>
          </ejs-textbox>
        </div>

        <div class="row">
          <ejs-textbox
            placeholder="Enter the Mail Address"
            cssClass="e-icon-textbox"
            floatLabelType="Auto"
            [(value)]="email"
            [prependTemplate]="prependIconTemplate"
            [appendTemplate]="appendIconTemplate">
            <ng-template #prependIconTemplate>
              <span class="e-icons e-people"></span>
              <span class="e-input-separator"></span>
            </ng-template>
            <ng-template #appendIconTemplate>
              <span>.com</span>
              <span class="e-input-separator"></span>
              <span class="e-icons e-trash" (click)="onDeleteClick()"></span>
            </ng-template>
          </ejs-textbox>
        </div>
      </div>
    </div>
  `,
  standalone: true,
  encapsulation: ViewEncapsulation.None,
  imports: [TextBoxModule, DropDownListModule]
})
export class AppComponent {

  public password: string = '';
  public passwordType: 'password' | 'text' = 'password';
  public email: string = '';

  onEyeIconClick(e: MouseEvent): void {
    this.passwordType = this.passwordType === 'password' ? 'text' : 'password';
     }

  onDeleteClick(): void {
    this.email = '';
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can view the demo here: TextBox Adornments demo.