Import
import { AmountModule } from '@backbase/ui-ang/amount'
Usage
Use the bb-amount-ui component to display an amount. The amount input is required.
<!-- Basic amount usage with amount and currency -->
<bb-amount-ui [amount]="1234.56" [currency]="'USD'"></bb-amount-ui>
Locale token
The LOCALE_ID token sets the same locale for all instances of the amount component in the project. Refer to its Angular documentation for more information.
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
abbreviate |
boolean |
false |
|
amount (required) |
string | number |
|
|
currency |
string |
'' |
|
currencyFormat |
'wide' | 'narrow' |
'wide' |
|
decimalPlaces |
number |
undefined |
|
hideCurrencySymbol |
boolean |
false |
|
mapCurrency |
boolean |
true |
|
showPercent |
boolean |
false |
|
showPlusSign |
boolean |
false |
|
signPosition |
'left' | 'right' |
'left' |
|
trailingZeroes |
boolean |
true |
Global configuration token
The AMOUNT_CONFIG_TOKEN token sets the same global configuration for all instances of the amount component in the project. The following properties can be overridden:
- abbreviate
- currency
- decimalPlaces
- mapCurrency
- trailingZeroes
- currencyFormat
- signPosition
import { AMOUNT_CONFIG_TOKEN } from '@backbase/ui-ang/amount';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const amountConfig = {
abbreviate: true
}
platformBrowserDynamic().bootstrapModule(AppModule, {
providers: [{ provide: AMOUNT_CONFIG_TOKEN, useValue: amountConfig }]
});
abbreviate
The abbreviate input determines whether to abbreviate large numbers (e.g., 1,000,000 to 1M). It can be overridden by a global configuration token.
<!-- Amount with abbreviation enabled -->
<bb-amount-ui
[abbreviate]="true"
[amount]="1000000"
[currency]="'USD'">
</bb-amount-ui>
amount
The amount input sets the value to display, as a string or number, which is converted into a floating-point number.
<!-- Amount with a numeric value -->
<bb-amount-ui
[amount]="1234.56"
[currency]="'USD'">
</bb-amount-ui>
currency
The currency input sets the optional currency code for formatting and displaying the currency symbol. It can be overridden by a global configuration token.
<!-- Amount with a numeric value -->
<bb-amount-ui
[amount]="1234.56"
[currency]="'USD'">
</bb-amount-ui>
currencyFormat
The currencyFormat input sets whether to use the wide or narrow currency symbol.
<!-- Amount with narrow currency format -->
<bb-amount-ui
[currencyFormat]="narrow"
[amount]="1234.56"
[currency]="'USD'">
</bb-amount-ui>
decimalPlaces
The decimalPlaces input overrides the number of decimal places to display. If undefined, the default for the given currency will be used. It can be overridden by a global configuration token.
<!-- Amount with 3 decimal places -->
<bb-amount-ui
[decimalPlaces]="3"
[amount]="1234.567"
[currency]="'USD'">
</bb-amount-ui>
hideCurrencySymbol
The hideCurrencySymbol input determines whether to hide the currency symbol.
<!-- Amount with currency symbol hidden -->
<bb-amount-ui
[hideCurrencySymbol]="true"
[amount]="1234.56"
[currency]="'USD'">
</bb-amount-ui>
mapCurrency
The mapCurrency input determines whether the currency code should be transformed to a symbol. It can be overridden by a global configuration token.
<!-- Amount with mapCurrency disabled -->
<bb-amount-ui
[mapCurrency]="false"
[amount]="1234.56"
[currency]="'USD'">
</bb-amount-ui>
showPercent
The showPercent input determines whether to display a percent symbol instead of a currency symbol.
<!-- Amount with percent symbol -->
<bb-amount-ui
[showPercent]="true"
[amount]="0.25"
[hideCurrencySymbol]="true">
</bb-amount-ui>
showPlusSign
The showPlusSign input determines whether to show a plus sign before positive amounts.
<!-- Amount with plus sign for positive value -->
<bb-amount-ui
[showPlusSign]="true"
[amount]="1234.56"
[currency]="USD">
</bb-amount-ui>
signPosition
The signPosition input sets the position of the negative sign (left or right of the currency symbol). It only applies to negative amounts and only to LTR locales. It can be overridden by a global configuration token.
<!-- Amount with sign on the right -->
<bb-amount-ui
[signPosition]="right"
[amount]="-1234.56"
[currency]="'USD'">
</bb-amount-ui>
trailingZeroes
The trailingZeroes input determines whether to display trailing zeroes after the decimal point. It can be overridden by a global configuration token.
<!-- Amount with trailing zeroes hidden -->
<bb-amount-ui
[trailingZeroes]="false"
[amount]="1234.5"
[currency]="'USD'">
</bb-amount-ui>