Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filterupdated
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Icons
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigationupdated
    • Notification
    • Pager
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilitiesnew
    Styling & Themes
    Common Features
    Project Setup
    Knowledge Base
    Sample Applications
    FAQ
    Troubleshooting
Components / Inputs / API / NumericTextBoxComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

NumericTextBoxComponent

Represents the Kendo UI NumericTextBox component for Angular.

Selector

kendo-numerictextbox

Export Name

Accessible in templates as #kendoNumericTextBoxInstance="kendoNumericTextBox"

Inputs

NameTypeDefaultDescription

autoCorrect

boolean

Specifies whether the value will be auto-corrected based on the minimum and maximum values (see example).

changeValueOnScroll

boolean

true

Determines whether the value of the NumericTextBox will be changed via scrolling. Defaults to true.

decimals

number

Specifies the number of decimals that the user can enter when the input is focused (see example).

disabled

boolean

Determines whether the NumericTextBox is disabled (see example).

fillMode

InputFillMode

The fillMode property specifies the background and border styles of the NumericTextBox (see example). The possible values are:

  • flat
  • solid (default)
  • outline
  • none

max

number

Specifies the greatest value that is valid (see example).

maxlength

number

Specifies the maximum number of characters the end user can type or paste in the input. The locale-specific decimal separator and negative sign (-) are included in the length of the value when present. The maxlength restriction is not applied to the length of the formatted value when the component is not focused.

min

number

Specifies the smallest value that is valid (see example).

placeholder

string

Specifies the input placeholder.

rangeValidation

boolean

Determines whether the built-in minimum or maximum validators are enforced when a form is validated.

The 4.2.0 Angular version introduces the min and max validation directives. As a result, even if you set rangeValidation

to false, the built-in Angular validators will be executed.

readonly

boolean

Determines whether the NumericTextBox is in its read-only state (see example).

rounded

InputRounded

The rounded property specifies the border radius of the NumericTextBox (see example). The possible values are:

  • small
  • medium (default)
  • large
  • none

selectOnFocus

boolean

Determines whether the whole value will be selected when the NumericTextBox is clicked. Defaults to true.

size

InputSize

The size property specifies padding of the NumericTextBox internal input element (see example). The possible values are:

  • small
  • medium (default)
  • large
  • none

spinners

boolean

Specifies whether the Up and Down spin buttons will be rendered (see example).

step

number

Specifies the value that is used to increment or decrement the component value (see example).

tabindex

number

Specifies the tabindex of the component.

title

string

Sets the title of the input element of the NumericTextBox.

value

number

Specifies the value of the NumericTextBox (see example).

Fields

NameTypeDefaultDescription

format

string | NumberFormatOptions

Specifies the number format which is used when the NumericTextBox is not focused (see example). If format is set to null or undefined, the default format will be used.

Events

NameTypeDescription

blur

[EventEmitter]({{ site.data.urls.angular['eventemitter'] }})<any>

Fires each time the input element gets blurred (see example).

focus

[EventEmitter]({{ site.data.urls.angular['eventemitter'] }})<any>

Fires each time the user focuses the input element (see example).

valueChange

[EventEmitter]({{ site.data.urls.angular['eventemitter'] }})<any>

Fires each time the user selects a new value (see example).

Methods

blur

Blurs the NumericTextBox.

focus

Focuses the NumericTextBox.

@Component({
selector: 'my-app',
template: `
 <button (click)="numerictextbox.focus()">Focus NumericTextBox</button>
 <kendo-numerictextbox #numerictextbox></kendo-numerictextbox>
`
})
class AppComponent { }

notifyValueChange

Notifies the NumericTextBoxComponent that the input value should be changed. Can be used to update the input after setting the component properties directly.

In this article

Not finding the help you need?

Contact Support