Formats in Angular Numerictextbox component

26 Feb 20264 minutes to read

You can format the value of NumericTextBox using format property.
The value will be displayed in the specified format when the component is in focused out state. The format string supports both the standard numeric format string and custom numeric format string as specified in MSDN.

Standard formats

Standard numeric formats use specifiers like n (number), p (percentage), and c (currency) to format values in the NumericTextBox. By using these format specifiers, you can create percentage and currency input behaviors.

The following example demonstrates percentage and currency format usage:

app.component.ts

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



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

@Component({
imports: [
        
        NumericTextBoxModule,
        FormsModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the NumericTextBox component
    // sets percentage with 2 numbers of decimal places format
    // sets currency with 2 numbers of decimal places format
    template: `
             <div class='wrap'>
               <ejs-numerictextbox format='p2' value='0.5' min='0' max='1' step='0.01' placeholder='Percentage format' floatLabelType= 'Auto'></ejs-numerictextbox>
             </div>
             <div class='wrap'>
               <ejs-numerictextbox format='c2' value='10' placeholder='Currency format' floatLabelType= 'Auto'></ejs-numerictextbox>
             </div>
            `
})
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));

Custom formats

Custom numeric formats can be created by combining format specifiers like # (optional digit) and 0 (required digit) to meet specific requirements.

The following examples demonstrate custom format usage:

app.component.ts

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



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

@Component({
imports: [
        
        NumericTextBoxModule,
        FormsModule
    ],


standalone: true,
    selector: 'app-root',
    // specifies the template string for the NumericTextBox component
    // sets the format using custom format string `#`
    // sets the format using custom format string `0`
    template: `
            <div class='wrap'>
               <ejs-numerictextbox format='###.##' value='10' placeholder='Custom format string #' floatLabelType= 'Auto'></ejs-numerictextbox>
             </div>
            <div class='wrap'>
               <ejs-numerictextbox format='000.00' value='10' placeholder='Custom format string 0' floatLabelType= 'Auto'></ejs-numerictextbox>
             </div>
            `
})
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));