A ui:outputCurrency component represents a number as a currency that is wrapped in an HTML span tag. This component can be used with ui:inputCurrency, which takes in a number as a currency. To display a currency, you can use an attribute value and bind it to the ui:outputCurrency component.
<aura:attribute name="myCurr" type="Decimal" default="50000"/> <ui:outputCurrency aura:id="curr" value="{!v.myCurr}"/>
The previous example renders the following HTML.
<span class="uiOutputCurrency">$50,000.00</span>
To override the browser's locale, use the currencySymbol attribute.
<aura:attribute name="myCurr" type="Decimal" default="50" currencySymbol="£"/>
You can also override it by specifying the format.
var curr = cmp.find("curr"); curr.set("v.format", '£#,###.00');
This example shows how you can bind data from a ui:inputCurrency component.
<aura:component> <aura:attribute name="myCurrency" type="integer" default="50"/> <ui:inputCurrency aura:id="amount" label="Amount" class="field" value="{!v.myCurrency}" updateOn="keyup"/> You entered: <ui:outputCurrency value="{!v.myCurrency}"/> </aura:component>
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 style to be attached to the component. This style is added in addition to base styles output by the component. | |
currencyCode | String | The ISO 4217 currency code specified as a String, e.g. “USD”. | |
currencySymbol | String | The currency symbol specified as a String. | |
format | String | The format of the number. For example, format=“.00” displays the number followed by two decimal places. If not specified, the default format based on the browser's locale will be used. | |
value | Decimal | The output value of the currency, which is defined as type Decimal. | Yes |
Event Name | Event Type | Description |
---|---|---|
dblclick | COMPONENT | The event fired when the user double-clicks the component. |
mouseover | COMPONENT | The event fired when the user moves the mouse pointer over the component. |
mouseout | COMPONENT | The event fired when the user moves the mouse pointer away from the component. |
mouseup | COMPONENT | The event fired when the user releases the mouse button over the component. |
mousemove | COMPONENT | The event fired when the user moves the mouse pointer over the component. |
click | COMPONENT | The event fired when the user clicks on the component. |
mousedown | COMPONENT | The event fired when the user clicks a mouse button over the component. |