A lightning:formattedNumber component displays formatted numbers for decimals, currency, and percentages. This component uses the Intl.NumberFormat JavaScript object to format numerical values. The locale set in the app's user preferences determines how numbers are formatted.
The component has several attributes that specify how number formatting is handled in your app. Among these attributes are minimumSignificantDigits and maximumSignificantDigits. Significant digits refer the accuracy of a number. For example, 1000 has one significant digit, but 1000.0 has five significant digits. Additionally, the number of decimal places can be customized using maximumFractionDigits.
Decimal numbers default to 3 decimal places. This example returns 1234.568.
<aura:component> <lightning:formattedNumber value="1234.5678" /> </aura:component>
Currencies default to 2 decimal places. In this example, the formatted number displays as $5,000.00.
<aura:component> <lightning:formattedNumber value="5000" style="currency" currencyCode="USD" /> </aura:component>
Percentages default to 0 decimal places. In this example, the formatted number displays as 50%.
<aura:component> <lightning:formattedNumber value="0.5" style="percent" /> </aura:component>
This component provides the following fallback behavior in Apple Safari 10 and below.
<lightning:formattedNumber value="12.34" style="currency" currencyCode="EUR"/>
<lightning:formattedNumber value="12.34" style="currency" currencyCode="USD" currencyDisplayAs="symbol"/>
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
currencyCode | String | Only used if style='currency', this attribute determines which currency is displayed. Possible values are the ISO 4217 currency codes, such as 'USD' for the US dollar. | |
currencyDisplayAs | String | Determines how currency is displayed. Possible values are symbol, code, and name. This value defaults to symbol. | |
maximumFractionDigits | Integer | The maximum number of fraction digits that are allowed. | |
maximumSignificantDigits | Integer | The maximum number of significant digits that are allowed. Possible values are from 1 to 21. | |
minimumFractionDigits | Integer | The minimum number of fraction digits that are required. | |
minimumIntegerDigits | Integer | The minimum number of integer digits that are required. Possible values are from 1 to 21. | |
minimumSignificantDigits | Integer | The minimum number of significant digits that are required. Possible values are from 1 to 21. | |
style | String | The number formatting style to use. Possible values are decimal, currency, and percent. This value defaults to decimal. | |
title | String | Displays tooltip text when the mouse moves over the element. | |
value | Decimal | The value to be formatted. | Yes |