Customize the UI appearance of the MaskedTextBox in Angular MaskedTextBox component

26 Feb 20262 minutes to read

The MaskedTextBox appearance can be customized by adding a custom cssClass to the component and applying custom styles. The following example demonstrates how to customize the MaskedTextBox appearance.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs'



import { Component } from '@angular/core';

@Component({
imports: [
         MaskedTextBoxModule
    ],


standalone: true,
    selector: 'app-root',
    // sets mask format to the MaskedTextBox
    template: `
            <div class="col-sm-6">
                <br/><ejs-maskedtextbox #mask="" id="mask1" mask='00000' value= "42648" name="mask_value" cssClass="e-style" placeholder= 'Enter user ID' floatLabelType= 'Always' (focus)= "onfocus($event)"></ejs-maskedtextbox>
            </div>
    `
})

export class AppComponent {
    public onfocus(args: any): void {
        //sets cursor position at start of MaskedTextBox
        args.selectionEnd= args.selectionStart;
    }
}

main.ts

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