Adornments in Angular MaskedTextBox control

26 Feb 20263 minutes to read

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

Common Use Cases

• Entry Guidance: Display icons or text that hints at the expected input format (e.g., a user icon for login fields).
• Quick Actions: Include buttons for common operations such as submit, clear, or copy.
• Context Labels: Add static text like country codes, domain names, or measurement units.
• Visual Feedback: Show status indicators without affecting mask behavior.

Adding Adornments to MaskedTextBox

Use prependTemplate to render elements before the masked input, and appendTemplate to render elements after it. These templates support any inline HTML or icon markup and do not interfere with mask 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 MaskedTextBox:

app.component.ts

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

@Component({
    selector: 'app-root',
    styleUrls: ['.././index.css'],
    template:`<div class="control-section adornment-mask">
    <div class="content-wrapper">
        <div class="mask-row">
            <ejs-maskedtextbox mask="0000-000-000" promptChar="#" cssClass="e-prepend-mask" placeholder="Enter phone number" floatLabelType="Auto" [prependTemplate]="prependTemplate" [appendTemplate]="appendTemplate">
                <ng-template #prependTemplate>
                    <span class="e-icons e-user"></span>
                    <span class="e-input-separator"></span>
                </ng-template>
                <ng-template #appendTemplate>
                    <span class="e-input-separator"></span>
                    <span class="e-icons e-send"></span>
                </ng-template>
            </ejs-maskedtextbox>
        </div>
    </div>
</div>`,
    standalone: true,
    encapsulation: ViewEncapsulation.None,
    imports: [MaskedTextBoxModule]
})
export class AppComponent {
    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: MaskedTextBox Adornments demo.