File

packages/eui/packages/components/eui-input-number/eui-input-number.component.ts

Description

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:

  • min: The minimum number can be entered. Blocks user's input if not in range.
  • max: The maximum number can be entered. Blocks user's input if not in range.
  • leadingZero: Adds leading zero to a number. Formatting will not work.
  • isInvalid: Sets the invalid state of the input element.
  • fractionDigits: Determines how many digits to show after the decimal point.
  • digits: Determines how many digits to show before the decimal point.
  • fillFraction: Fills the decimal part with zeros in case it's less than the fractionDigits.
  • roundUp: Rounds a number with more than two decimals UP.
  • noFormat: Disables the number formatting. It will be treated as a plain number.
  • value: The value of the input element.
  • placeholder: The placeholder value of the input element.
  • euiClearable: Adds a clear button to the input element.
  • euiLoading: Adds a loading spinner to the input element.
  • readonly: Disables the input element.
  • disabled: Disables the input element.
  • euiDanger: Sets the invalid state of the input element.
  • euiSuccess: Sets the success state of the input element.
  • euiWarning: Sets the warning state of the input element.
  • euiInfo: Sets the info state of the input element.
  • euiPrimary: Sets the primary state of the input element.
  • euiSecondary: Sets the secondary state of the input element.

Extends

InputDirective

Implements

OnInit OnDestroy DoCheck OnChanges

Metadata

Index

Properties
Methods
Inputs
HostBindings
HostListeners
Accessors

Constructor

constructor()

Inputs

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

HostBindings

attr.type
Type : string
Default value : 'eui-number'
class
Type : string

CSS classes to be added to the host element.

HostListeners

focusout
focusout()
keydown
Arguments : '$event'
keydown(e: KeyboardEvent)
paste
Arguments : '$event'
paste(event: ClipboardEvent)

Methods

onPaste
onPaste(event: ClipboardEvent)
Decorators :
@HostListener('paste', ['$event'])
Parameters :
Name Type Optional
event ClipboardEvent No
Returns : void
getCssClasses
getCssClasses(rootClass: string)
Parameters :
Name Type Optional
rootClass string No
Returns : string

Properties

cleaveInstance
Type : CleaveInstance

holds an instance of cleave.js

onChange
Type : function
Default value : () => {...}
Public onChangeCallback
Type : function
onTouched
Type : function
Default value : () => {...}

Accessors

isInvalid
getisInvalid()
setisInvalid(state: BooleanInput)
Parameters :
Name Type Optional
state BooleanInput No
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 :
Name Type Optional
value NumberInput No
Returns : void

results matching ""

    No results matching ""