All Components

Formats

You can control the format of the NumericTextBox by using the format property.

It accepts string or NumberFormatOptions parameters. When format is set and the input element is not focused, the value is formatted accordingly. By default, the format is set to 'n2'.

For more information on the date and number formats Kendo UI for Angular supports, refer to the kendo-intl GitHub repository.

@Component({
    selector: 'my-app',
    template: `
        <h6>Decimal</h6>
        <kendo-numerictextbox
            [format]="'n2'"
            [value]="value"
        ></kendo-numerictextbox>

        <h6>Percentage</h6>
        <kendo-numerictextbox
            [format]="'p'"
            [step]="0.1"
            [min]="0"
            [max]="1"
            [value]="percentage"
        ></kendo-numerictextbox>

        <h6>Currency</h6>
        <kendo-numerictextbox
            [format]="'c0'"
            [min]="0"
            [value]="value"
        ></kendo-numerictextbox>

        <h6>Currency with format options</h6>
        <kendo-numerictextbox
            [format]="formatOptions"
            [value]="value"
            [min]="0"
        ></kendo-numerictextbox>
    `
})

class AppComponent {
    public value: number = 5;
    public percentage: number = 0.7;
    public formatOptions: any = {
        style: 'currency',
        currency: 'EUR',
        currencyDisplay: 'name'
    };
}
In this article