Import
import { AmountInputModule } from '@backbase/ui-ang/amount-input'
Usage
Use the bb-amount-input-ui component to display an amount input. The currency input is recommended for currency formatting.
<!-- Basic amount input usage with currency -->
<bb-amount-input-ui [currency]="'USD'"></bb-amount-input-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
autoDecimal |
boolean |
false |
|
currency |
string |
'' |
|
isDotDecimalSeparator |
boolean |
false |
|
mapCurrency |
boolean |
true |
|
maxLength |
number |
undefined |
|
placeholder |
string |
'' |
|
swapCurrencyAndValue |
boolean |
false |
|
textHint |
string |
'' |
|
wrapperClasses |
string |
'' |
|
decimalPlaces |
number | string |
undefined |
autoDecimal
The autoDecimal input determines whether to automatically add decimal places to the input value.
<!-- Amount input with autoDecimal enabled -->
<bb-amount-input-ui [autoDecimal]="true"></bb-amount-input-ui>
currency
The currency input sets the currency code for formatting and displaying the currency symbol.
<!-- Amount input with currency set to EUR -->
<bb-amount-input-ui [currency]="'EUR'"></bb-amount-input-ui>
isDotDecimalSeparator
The isDotDecimalSeparator input determines whether to use a dot (.) as the decimal separator. Unless set to true, the component expects a locale-based decimal separator.
<!-- Amount input with dot as decimal separator -->
<bb-amount-input-ui [isDotDecimalSeparator]="true"></bb-amount-input-ui>
mapCurrency
The mapCurrency input determines whether the currency code should be transformed to a symbol.
<!-- Amount input with mapCurrency disabled -->
<bb-amount-input-ui
[mapCurrency]="false"
[currency]="'USD'">
</bb-amount-input-ui>
maxLength
The maxLength input sets the maximum length for the input value.
<!-- Amount input with maxLength set to 10 -->
<bb-amount-input-ui [maxLength]="10"></bb-amount-input-ui>
placeholder
The placeholder input sets the placeholder text for the input field.
<!-- Amount input with a placeholder -->
<bb-amount-input-ui [placeholder]="'Enter amount'"></bb-amount-input-ui>
swapCurrencyAndValue
The swapCurrencyAndValue input determines whether the currency appears on the right and the value on the left.
<!-- Amount input with currency and value swapped -->
<bb-amount-input-ui
[swapCurrencyAndValue]="true"
[currency]="'USD'">
</bb-amount-input-ui>
textHint
The textHint input provides a text hint for the input field.
<!-- Amount input with a text hint -->
<bb-amount-input-ui [textHint]="'This is a hint'"></bb-amount-input-ui>
wrapperClasses
The wrapperClasses input sets custom class names for the wrapper div.
<!-- Amount input with custom wrapper classes -->
<bb-amount-input-ui [wrapperClasses]="'my-custom-class'"></bb-amount-input-ui>
decimalPlaces
Overrides the number of allowed decimal places. When not provided, currency defaults from getNumberOfCurrencyDigits are used.
<bb-amount-input-ui [currency]="'ALL'" [decimalPlaces]="2"></bb-amount-input-ui>
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviours and configuration options to ensure a fully accessible experience for all users.
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
ariaActivedescendant |
Identifies the currently active element when focus is on a composite widget |
string |
|
ariaAutocomplete |
Indicates whether inputting text could trigger display of predictions |
string |
|
ariaControls |
Indicates which element(s) the widget controls |
string |
|
ariaDescribedby |
Sets the aria-describedby attribute for accessibility. Set it to the ID of the element in the DOM which contains descriptive text about the amount input |
string |
|
ariaExpanded |
Indicates if a control is expanded or collapsed |
string |
|
ariaInvalid |
Indicates the entered value is not in a format expected by the application |
string |
|
ariaLabel |
Sets an accessible label for the input |
string |
|
ariaLabelledby |
References elements that label the input. Set it to the ID of the element in the DOM which acts as the label of the amount input |
string |
|
ariaOwns |
Identifies elements to define a relationship when DOM hierarchy can't be used |
string |