packages/eui/packages/components/eui-input-number/eui-input-number.component.ts
Input number component that allows the user to enter a number. It supports number formatting and validation. It uses Cleave.js to format the number. It depends on the LocaleService to get the current locale and format the number accordingly.
It supports the following attributes:
OnInit
OnDestroy
DoCheck
OnChanges
HostDirectives |
EuiClearableDirective
Inputs : euiClearable readonly disabled
EuiLoadingDirective
Inputs : euiLoading readonly
|
host | { |
selector | input[euiInputNumber] |
styleUrls | ./eui-input-number.scss |
Properties |
Methods |
Inputs |
HostBindings |
HostListeners |
Accessors |
constructor()
|
digits |
Type : number
|
determines how many digits to show before the decimal point |
fillFraction |
Type : boolean
|
fills the decimal part with zeros in case it's less than the fractionDigits |
fractionDigits |
Type : number
|
determines how many digits to show after the decimal point |
isInvalid |
Type : boolean
|
leadingZero |
Type : number
|
Default value : 0
|
Adds leading zero to a number. Formatting will not work. e.g. with leadingZero=3 input number 5 => 005 |
max |
Type : number
|
The maximum number can be entered. Blocks user's input if not in range. |
min |
Type : number
|
The minimum number can be entered. Blocks user's input if not in range. |
noFormat |
Type : boolean
|
Disables the number formatting. It will be treated as a plain number. Will do a thousand grouping of number. |
roundUp |
Type : number
|
rounds a number with more than two decimals UP |
value |
Type : string
|
The value of the input element. |
disabled |
Type : boolean
|
euiDanger |
Type : boolean
|
Default value : false
|
euiDisabled |
Type : boolean
|
Default value : false
|
placeholder |
Type : string | null
|
readonly |
Type : any
|
attr.type |
Type : string
|
Default value : 'eui-number'
|
class |
Type : string
|
CSS classes to be added to the host element. |
focusout |
focusout()
|
keydown |
Arguments : '$event'
|
keydown(e: KeyboardEvent)
|
paste |
Arguments : '$event'
|
paste(event: ClipboardEvent)
|
onPaste | ||||||
onPaste(event: ClipboardEvent)
|
||||||
Decorators :
@HostListener('paste', ['$event'])
|
||||||
Parameters :
Returns :
void
|
getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
Parameters :
Returns :
string
|
cleaveInstance |
Type : CleaveInstance
|
holds an instance of cleave.js |
onChange |
Type : function
|
Default value : () => {...}
|
Public onChangeCallback |
Type : function
|
onTouched |
Type : function
|
Default value : () => {...}
|
isInvalid | ||||||
getisInvalid()
|
||||||
setisInvalid(state: BooleanInput)
|
||||||
Parameters :
Returns :
void
|
cssClasses |
getcssClasses()
|
CSS classes to be added to the host element.
Returns :
string
|
fractionDigits | ||||||
getfractionDigits()
|
||||||
determines how many digits to show after the decimal point
Returns :
number
|
||||||
setfractionDigits(value: NumberInput)
|
||||||
Parameters :
Returns :
void
|