Customize the ui appearance of the control in Angular Maskedtextbox component

27 Apr 20241 minute to read

The appearance of the MaskedTextBox can be changed by adding custom cssClass to the component and enabling styles.
Refer to the following example to change the appearance of the MaskedTextBox.

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));