Import
import { CurrencyInputModule } from '@backbase/ui-ang/currency-input'
Usage
Use the bb-currency-input-ui component to allow users to enter a currency amount. The component supports multiple currencies, configurable decimal precision, and accessibility features.
<!-- Basic currency input usage -->
<bb-currency-input-ui [currencies]="['USD', 'EUR']"></bb-currency-input-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
allowNegativeValue |
boolean |
false |
|
currencies |
string[] |
[] |
|
currencyInputId |
string |
Unique ID |
|
currencyLabel |
string |
'' |
|
currencyLabelId |
string |
Unique ID |
|
decimalId |
string |
Unique ID |
|
decimalInputId |
string |
Unique ID |
|
decimalLabel |
string |
'' |
|
decimalLabelId |
string |
Unique ID |
|
decMaxLen |
number |
Currency default |
|
decMinLen |
number |
2 |
|
disabled |
boolean | CurrencyFieldsState |
false |
|
integer |
boolean |
false |
|
integerId |
string |
Unique ID |
|
integerInputId |
string |
Unique ID |
|
integerLabel |
string |
'' |
|
integerLabelId |
string |
Unique ID |
|
isRightAligned |
boolean |
false |
|
placeholder |
string |
'0' |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
resultType |
string | number |
'number' |
Global Configuration Token
You can globally configure default values for the following inputs using the CURRENCYINPUT_CONFIG_TOKEN injection token:
- allowNegativeValue
- currencies
- placeholder
import { CURRENCY_INPUT_CONFIG_TOKEN } from '@backbase/ui-ang/currency-input';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const currencyInputConfig = {
allowNegativeValue: true
}
platformBrowserDynamic().bootstrapModule(AppModule, {
providers: [{ provide: CURRENCY_INPUT_CONFIG_TOKEN, useValue: currencyInputConfig }]
});
allowNegativeValue
The allowNegativeValue input allows negative values to be entered. Defaults to false.
<!-- Currency input allowing negative values -->
<bb-currency-input-ui
[allowNegativeValue]="true"
[currencies]="['USD']">
</bb-currency-input-ui>
currencies
The currencies input sets the list of available currencies for selection. If only one currency is provided, the dropdown is disabled and the value is set to that currency.
<!-- Currency input with multiple currencies -->
<bb-currency-input-ui [currencies]="['USD', 'EUR']"></bb-currency-input-ui>
decMaxLen
The decMaxLen input configures the maximum number of decimal digits allowed. If not set, the default for the selected currency is used.
<!-- Currency input with 4 decimal places -->
<bb-currency-input-ui
[currencies]="['USD']"
[decMaxLen]="4">
</bb-currency-input-ui>
decMinLen
The decMinLen input sets the minimum number of decimal digits. Defaults to 2.
<!-- Currency input with minimum 3 decimal places -->
<bb-currency-input-ui
[currencies]="['USD']"
[decMinLen]="3">
</bb-currency-input-ui>
disabled
The disabled input disables the input fields. Can be a boolean or an object specifying which fields to disable.
<!-- Currency input fully disabled -->
<bb-currency-input-ui
[currencies]="['USD']"
[disabled]="true">
</bb-currency-input-ui>
integer
The integer input, when true, only allows the integer part (no decimals).
<!-- Currency input with integer only -->
<bb-currency-input-ui
[currencies]="['USD']"
[integer]="true">
</bb-currency-input-ui>
placeholder
The placeholder input sets the placeholder for the integer input. Defaults to ’0'.
<!-- Currency input with custom placeholder -->
<bb-currency-input-ui
[currencies]="['USD']"
placeholder="Enter amount">
</bb-currency-input-ui>
readonly
The readonly input makes the input fields read-only. Defaults to false.
<!-- Currency input read-only -->
<bb-currency-input-ui
[currencies]="['USD']"
[readonly]="true">
</bb-currency-input-ui>
required
The required input marks the input as required for form validation. Defaults to false.
<!-- Currency input required -->
<bb-currency-input-ui
[currencies]="['USD']"
[required]="true">
</bb-currency-input-ui>
resultType
The resultType input sets the output type for the value: 'string' for large numbers, 'number' by default.
<!-- Currency input with string result type -->
<bb-currency-input-ui
[currencies]="['USD']"
resultType="string">
</bb-currency-input-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent | void> |
Emitted when the input loses focus |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors 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 |
|---|---|---|
|
ariaDescribedby |
Sets the aria-describedby attribute for the input |
string |
|
ariaInvalid |
Sets the aria-invalid attribute for the inputng |
string |
|
ariaLabelledby |
Sets the aria-labelledby attribute for the input |
string |
|
currencyListAriaLabel |
Aria label for the currency dropdown |
string |
|
currencyListWithOnItemAriaLabel |
Aria label for the currency list with one item |
string |
|
decimalLabelSrOnly |
Hides the decimal label visually, keeps it for screen readers. It defaults to false |
boolean |
|
integerLabelSrOnly |
Hides the integer label visually, keeps it for screen readers. It defaults to false |
boolean |
- The component manages ARIA attributes for all input fields.
- Labels and descriptions are associated with their respective fields for screen readers.
- The validation message area uses aria-live="assertive" for real-time error feedback.