@anguless/angulux/inputnumber

inputnumber

1 declarations4 demos

import

import { InputNumberModule } from '@anguless/angulux/inputnumber';

Basic

InputNumber binds to a number and formats it for the locale.

<agl-inputNumber [(ngModel)]="value" inputId="qty" />

Buttons

showButtons adds spinners, stacked by default and horizontal on request.

<agl-inputNumber [(ngModel)]="stacked" [showButtons]="true" [min]="0" [max]="100" /><agl-inputNumber [(ngModel)]="horizontal" [showButtons]="true" buttonLayout="horizontal" [min]="0" [max]="100" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />

Currency

Currency mode formats the value for a currency and a locale.

<agl-inputNumber [(ngModel)]="usd" mode="currency" currency="USD" locale="en-US" /><agl-inputNumber [(ngModel)]="vnd" mode="currency" currency="VND" locale="vi-VN" />

Decimals and affixes

Fraction digits, prefixes and suffixes are all properties rather than formatting done by hand.

<agl-inputNumber [(ngModel)]="value" [minFractionDigits]="2" [maxFractionDigits]="5" /><agl-inputNumber [(ngModel)]="percent" suffix="%" [min]="0" [max]="100" />

API

Generated from the committed corpus, which check:corpus holds to the built library.

InputNumber

componentagl-inputNumber, agl-inputnumber, agl-input-number

InputNumber is an input component to provide numerical input.

Input	Type	Default	Description
showButtons	boolean	not documented	Displays spinner buttons.
format	boolean	not documented	Whether to format the value.
buttonLayout	string	not documented	Layout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical".
inputId	string \| undefined	not documented	Identifier of the focus input to match a label defined for the component.
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Style class of the component.
placeholder	string \| undefined	not documented	Advisory information to display on input.
tabindex	number \| undefined	not documented	Specifies tab order of the element.
title	string \| undefined	not documented	Title text of the input text.
ariaLabelledBy	string \| undefined	not documented	Specifies one or more IDs in the DOM that labels the input field.
ariaDescribedBy	string \| undefined	not documented	Specifies one or more IDs in the DOM that describes the input field.
ariaLabel	string \| undefined	not documented	Used to define a string that labels the input element.
ariaRequired	boolean \| undefined	not documented	Used to indicate that user input is required on an element before a form can be submitted.
autocomplete	string \| undefined	not documented	Used to define a string that autocomplete attribute the current element.
incrementButtonClass	string \| undefined	not documented	Style class of the increment button.
decrementButtonClass	string \| undefined	not documented	Style class of the decrement button.
incrementButtonIcon	string \| undefined	not documented	Style class of the increment button.
decrementButtonIcon	string \| undefined	not documented	Style class of the decrement button.
readonly	boolean \| undefined	not documented	When present, it specifies that an input field is read-only.
allowEmpty	boolean	not documented	Determines whether the input field is empty.
locale	string \| undefined	not documented	Locale to be used in formatting.
localeMatcher	any	not documented	The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". See Locale Negotiation for details.
mode	string \| any	not documented	Defines the behavior of the component, valid values are "decimal" and "currency".
currency	string \| undefined	not documented	The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided.
currencyDisplay	string \| undefined \| any	not documented	How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, ü"code" to use the ISO currency code, "name" to use a localized currency name such as "dollar"; the default is "symbol".
useGrouping	boolean	not documented	Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
minFractionDigits	number \| undefined	not documented	The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information).
maxFractionDigits	number \| undefined	not documented	The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the ISO 4217 currency code list (2 if the list doesn't provide that information).
prefix	string \| undefined	not documented	Text to display before the value.
suffix	string \| undefined	not documented	Text to display after the value.
inputStyle	any	not documented	Inline style of the input field.
inputStyleClass	string \| undefined	not documented	Style class of the input field.
showClear	boolean	not documented	When enabled, a clear icon is displayed to clear the value.
autofocus	boolean \| undefined	not documented	When present, it specifies that the component should automatically get focus on load.

Output	Type	Description
onInput	EventEmitter<InputNumberInputEvent>	Callback to invoke on input.
onFocus	EventEmitter<Event>	Callback to invoke when the component receives focus.
onBlur	EventEmitter<Event>	Callback to invoke when the component loses focus.
onKeyDown	EventEmitter<KeyboardEvent>	Callback to invoke on input key press.
onClear	EventEmitter<void>	Callback to invoke when clear token is clicked.

Template slot	Description
<ng-template #clearicon>	Custom clear icon template.
<ng-template #incrementbuttonicon>	Custom increment button icon template.
<ng-template #decrementbuttonicon>	Custom decrement button icon template.

Inherited from BaseInput

inherited

Input	Type	Default	Description
fluid		false	Spans 100% width of the container when enabled.
variant	'filled' \| 'outlined' \| undefined	'outlined'	Specifies the input variant of the component.
size	'large' \| 'small' \| undefined	undefined	Specifies the size of the component.
inputSize	number \| null \| undefined	undefined	Specifies the visible width of the input element in characters.
pattern	string \| null \| undefined	undefined	Specifies the value must match the pattern. A list of regular expressions — what Signal Forms binds through `[formField]` — is ignored, because the form validates those itself.
min	number \| null \| undefined	undefined	The value must be greater than or equal to the value. A numeric string is read as a number; anything else that is not a finite number, such as the `Date` limit of a date field, is ignored.
max	number \| null \| undefined	undefined	The value must be less than or equal to the value. A numeric string is read as a number; anything else that is not a finite number, such as the `Date` limit of a date field, is ignored.
step	number \| null \| undefined	undefined	Unless the step is set to the any literal, the value must be min + an integral multiple of the step.
minlength	number \| null \| undefined	undefined	The number of characters (code points) must not be less than the value of the attribute, if non-empty.
maxlength	number \| null \| undefined	undefined	The number of characters (code points) must not exceed the value of the attribute.

Inherited from BaseEditableHolder

inherited

Input	Type	Default	Description
required		false	There must be a value (if set). Left unbound, a control bound through `formControlName`, `[formControl]` or `ngModel` is required when that control carries `Validators.required` or `Validators.requiredTrue`.
invalid		false	When present, it specifies that the component should have invalid state style. Left unbound, a control bound through `formControlName`, `[formControl]` or `ngModel` shows the state of that control once it is touched or dirty.
touched	boolean \| undefined	undefined	Whether the user has visited the control. Once this or `dirty` is set, the invalid state style waits for interaction: it appears when the control is touched or dirty. Signal Forms' `[formField]` sets both, so an untouched required field is not shown as invalid. Leave both unset and `invalid` alone decides.
dirty	boolean \| undefined	undefined	Whether the user has changed the value. See `touched`.
disabled		false	When present, it specifies that the component should have disabled state style.
name	string \| undefined	undefined	When present, it specifies that the name of the input.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.