Components / Inputs / NumericTextBox

Getting Started with Kendo UI for Angular NumericTextBox

The NumericTextBox lets the user edit and submit specific numeric values by typing or by using the spin buttons.

Basic Usage

The following example demonstrates the NumericTextBox in action.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
          <input id="ac" type="checkbox" [(ngModel)]="autoCorrect">
          <label for="ac">Auto-correct value to be between min and max</label>
        </div>
        <kendo-numerictextbox
            [value]="value" [min]="0" [max]="100" [autoCorrect]="autoCorrect">
        </kendo-numerictextbox>
    `
})

class AppComponent {
    public autoCorrect: boolean = false;
    public value: number = 5;
}

Functionality and Features

Events

The following example demonstrates basic NumericTextBox events.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
          <input id="ac" type="checkbox" [(ngModel)]="autoCorrect">
          <label for="ac">Auto-correct value to be between min and max</label>
        </div>
        <kendo-numerictextbox
          (valueChange)="onChange($event)"
          (focus)="onFocus()"
          (blur)="onBlur()"
            [value]="value" [min]="0" [max]="100" [autoCorrect]="autoCorrect">
        </kendo-numerictextbox>
    `
})
export class AppComponent {
    public autoCorrect: boolean = false;
    public value: number = 5;

    public onChange(value:number) {
      console.log(value);
    }

    public onFocus() {
      console.log('Focused');
    }

    public onBlur() {
      console.log('Blurred');
    }
}

Known Limitations

To keep its value, the NumericTextBox uses the Number JavaScript object. The Number JavaScript object persists its precision up to 16 digits, and units which are longer than that get converted to exponential numbers and lose their precision. Because the component relies on Number, it inherits the precision limitation and because the limitation is caused by the JavaScript logic, the NumericTextBox does not provide a workaround to handle it.

In this article