Adornments in Angular NumericTextBox control

26 Feb 20266 minutes to read

Adornments allow you to add custom elements before or after the NumericTextBox input using the prependTemplate and appendTemplate properties. These templates support icons, labels, action buttons, and other visual elements while preserving numeric validation and float label functionality.

Common Use Cases

• Currency Symbols: Display indicators like $, €, ¥ for monetary inputs.
• Unit Labels: Show measurement units (kg, cm, km, percentage).
• Action Icons: Include buttons for clear, reset, or custom operations.
• Visual Feedback: Display status indicators without affecting numeric behavior.

Adding Adornments to NumericTextBox

Use prependTemplate to render elements before the numeric input, and appendTemplate to render elements after it. These templates support any inline HTML or icon markup and do not interfere with numeric validation.

• prependTemplate: Renders HTML content before the input field
• appendTemplate: Renders HTML content after the input field

The following example shows how to implement adornments in the NumericTextBox:

app.component.ts

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

@Component({
  selector: 'app-root',
  styleUrls: ['.././index.css'],
  template: `
    <div class="col-lg-12 control-section adornment-numeric">
      <div class="content-wrapper">
        <div class="row custom-margin">
          <ejs-numerictextbox
            [(value)]="price"
            floatLabelType="Auto"
            cssClass="e-prepend-numeric"
            placeholder="Enter the price"
            [prependTemplate]="prependTemplate"
            (change)="onPriceChange()">
            <ng-template #prependTemplate>
              <span class="e-icons e-menu"></span>
              <span class="e-input-separator"></span>
              <span class="e-icons e-search"></span>
              <span class="e-input-separator"></span>
            </ng-template>
          </ejs-numerictextbox>
        </div>

        <div class="row custom-margin">
          <ejs-numerictextbox
            [(value)]="kg"
            [step]="1"
            floatLabelType="Auto"
            placeholder="Enter the kg"
            [appendTemplate]="appendTemplate"
            (change)="onKgChange()">
            <ng-template #appendTemplate>
              <div>
                <span>kg</span>
              </div>
            </ng-template>
          </ejs-numerictextbox>
        </div>

        <div class="row custom-margin custom-margin-row">
          <ejs-numerictextbox
            [(value)]="iconValue"
            [showSpinButton]="showSpinButtons"
            floatLabelType="Auto"
            cssClass="e-icon-numeric"
            placeholder="Enter the Number"
            [prependTemplate]="prependIconTemplate"
            [appendTemplate]="appendIconTemplate">
            <ng-template #prependIconTemplate>
              <span class="e-icons e-reset" title="Reset" (click)="onResetClick()"></span>
              <span class="e-input-separator"></span>
            </ng-template>
            <ng-template #appendIconTemplate>
              <span class="e-input-separator"></span>
              <span class="e-icons e-horizontal-line" (click)="onSubClick()"></span>
              <span class="e-input-separator"></span>
              <span class="e-icons e-plus" (click)="onPlusClick()"></span>
            </ng-template>
          </ejs-numerictextbox>
        </div>
      </div>
    </div>
  `,
  standalone: true,
  encapsulation: ViewEncapsulation.None,
  imports: [NumericTextBoxModule]
})
export class AppComponent {
  public showSpinButtons = false;
  public price: number = 1;
  public kg: number = 5;
  public iconValue: number | null = 10;

  onPriceChange(): void {
    this.kg = (this.price ?? 0) * 5;
  }

  onKgChange(): void {
    this.price = (this.kg ?? 0) / 5;
  }

  onResetClick(): void {
    this.iconValue = null;
  }

  onSubClick(): void {
    const current = Number(this.iconValue ?? 0);
    this.iconValue = current - 1;
  }

  onPlusClick(): void {
    const current = Number(this.iconValue ?? 0);
    this.iconValue = current + 1;
  }

  constructor() {}
}

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