Adornments in EJ2 Angular TextArea Control

26 Feb 20268 minutes to read

The TextArea component supports adornments that allow you to add custom elements before or after the textarea using the prependTemplate and appendTemplate properties. Adornment elements can include icons, text labels, or action buttons for formatting and content management. You can arrange adornments horizontally or vertically using the adornmentFlow and adornmentOrientation properties for flexible layouts.

Common Use Cases

• Visual Indicators: Icons for context (e.g., edit, comment).
• Formatting Tools: Buttons for bold, italic, underline.
• Content Actions: Save, clear, or submit buttons.
• Validation & Status: Character count or error icons.
• Flexible Layout: Horizontal or vertical adornment flow.

Adding Adornments with Orientation to TextArea

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

• prependTemplate: Renders elements before the textarea input.

• appendTemplate: Renders elements after the textarea input.

Control how adornments are positioned and arranged using the adornmentFlow and adornmentOrientation properties. Both properties accept only Horizontal or Vertical values as defined in the AdornmentsDirection type.

• adornmentFlow: Defines where adornments appear around the TextArea.
  • Horizontal: Prepend on the left, append on the right.
  • Vertical: Prepend above, append below.
• adornmentOrientation: Defines how items inside each adornment are arranged.
  • Horizontal: Items displayed in a row.
  • Vertical: Items displayed in a column.

The following example demonstrates how to add adornments with orientation in the TextArea control.

app.component.ts

import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { AdornmentsDirection, TextAreaComponent, TextAreaModule } from '@syncfusion/ej2-angular-inputs';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  selector: 'app-root',
  styleUrls: ['.././index.css'],
  template: `
    <div class="col-lg-8 control-section adornment-textarea">
      <div class="content-wrapper">
        <div class="multiline-row">
          <ejs-textarea
            #iconTextarea
            floatLabelType="Auto"
            placeholder="Add a comment"
            cssClass="e-outline"
            [rows]="5"
            [cols]="250"
            resizeMode="None"
            [prependTemplate]="prependTemplate"
            [appendTemplate]="appendTemplate">
            <ng-template #prependTemplate>
              <span class="e-icons e-bold"></span>
              <span class="e-input-separator"></span>
              <span class="e-icons e-italic"></span>
              <span class="e-input-separator"></span>
            </ng-template>
            <ng-template #appendTemplate>
              <span class="e-input-separator"></span>
              <span class="e-icons e-save"></span>
              <span class="e-input-separator"></span>
              <span class="e-icons e-trash"></span>
            </ng-template>
          </ejs-textarea>
        </div>
      </div>
    </div>

    <div class="col-lg-4 property-section adornment-textarea">
      <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
          <table id="property" title="Properties" class="multiline-property">
            <tr>
              <td> Flow Direction </td>
              <td>
                <ejs-dropdownlist
                  [dataSource]="flowOrientationData"
                  (change)="handleFlowOrientation($event)"
                  [index]="0"
                  popupHeight="200px">
                </ejs-dropdownlist>
              </td>
            </tr>
            <tr>
              <td> Orientation Direction </td>
              <td>
                <ejs-dropdownlist
                  [dataSource]="orientOrientationData"
                  (change)="handleOrientOrientation($event)"
                  [index]="0"
                  popupHeight="200px">
                </ejs-dropdownlist>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  `,
  standalone: true,
  encapsulation: ViewEncapsulation.None,
  imports: [TextAreaModule, DropDownListModule]
})
export class AppComponent {
  // Definite assignment because Angular sets this after view init
  @ViewChild('iconTextarea', { static: false })
  public textareaObj!: TextAreaComponent;

  public flowOrientationData: string[] = ['Horizontal', 'Vertical'];
  public orientOrientationData: string[] = ['Horizontal', 'Vertical'];

  // Update Flow direction and adjust append template
  handleFlowOrientation = (args: any): void => {
    const val = (args?.value as AdornmentsDirection) ?? 'Horizontal';
    this.textareaObj.adornmentFlow = val;

    // Update the append template (string template is supported)
    this.textareaObj.appendTemplate =
      val === 'Horizontal'
        ? '<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>'
        : '<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>';

    this.textareaObj.dataBind();
  };

  // Update Orientation direction and adjust append template
  handleOrientOrientation = (args: any): void => {
    const val = (args?.value as AdornmentsDirection) ?? 'Horizontal';
    this.textareaObj.adornmentOrientation = val;

    this.textareaObj.appendTemplate =
      val === 'Horizontal'
        ? '<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>'
        : '<span class="e-input-separator"></span><span class="e-icons e-save"></span><span class="e-input-separator"></span><span class="e-icons e-trash"></span>';

    this.textareaObj.dataBind();
  };
}

main.ts

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: TextArea Adornments demo.