• Public
  • Public/Protected
  • All

Number field powered by Angular Material library.

Example of usage

export const component: DraymanComponent = async ({ forceUpdate }) => {
    let celsius;
    let fahrenheit;
    let typing = false;

    return () => {

        return (
                    label="Temperature in Fahrenheit (°F)"
                    onValueChangeStart={async () => {
                        typing = true;
                        await forceUpdate();
                    onValueChange={async ({ value }) => {
                        typing = false;
                        fahrenheit = value;
                        celsius = (value - 32) / 1.8;
                        await forceUpdate();
                <div>{celsius && `${fahrenheit}°F = ${Math.round(celsius * 100) / 100}°C`}</div>
                <div>{typing ? `You are typing!` : `You aren't typing!`}</div>




Optional appearance

appearance: "legacy" | "standard" | "fill" | "outline"

Appearance style for the field. Wether outline (default), legacy, fill or standard.

Optional disabled

disabled: boolean

Whether the control is disabled.

Optional error

error: string

Error text to be shown underneath the form field control.

Optional helpText

helpText: string

Hint text to be shown underneath the form field control.

Optional label

label: string

The floating label for a field.

Optional onFocus

onFocus: ElementEvent<{}>

Executed when autocomplete field is focused.

Optional onValueChange

onValueChange: ElementEvent<{ value: number }>

Executed with an input value from user.

Optional placeholder

placeholder: string

The placeholder text.

Optional ref

ref: string

Optional style

style: CSS

Optional suggestions

suggestions: { label: string; value: any }[]

Autocomplete suggestions.

Optional suggestionsPanelWidth

suggestionsPanelWidth: string | number

Specify the width of the autocomplete panel. Can be any CSS sizing value, otherwise it will match the width of its host.

Optional updateOnBlur

updateOnBlur: boolean

Wether value of the field should be emitted when user is blurred out of the control.

Optional value

value: number

Value of the input.