ui:outputCurrency

Displays the currency in the default or specified format, such as with specific currency code or decimal places.

A ui:outputCurrency component represents a number as a currency that is wrapped in an HTML span tag. We recommend using lightning:formattedNumber with style="currency" instead of ui:outputCurrency.

This component can be used with ui:inputCurrency, which takes in a number as a currency. To apply Lightning Design System styling, we recommend that you use lightning:input with type="number" and formatter="currency" instead of ui:inputCurrency.

To display a currency, you can use an attribute value and bind it to the ui:outputCurrency component.

1<aura:attribute name="myCurr" type="Decimal" default="50000"/>
2<ui:outputCurrency aura:id="curr" value="{!v.myCurr}"/>

The previous example renders the following HTML.

1<span class="uiOutputCurrency">$50,000.00</span>

To override the browser's locale, use the currencySymbol attribute.

1<aura:attribute name="myCurr" type="Decimal" default="50" currencySymbol="£"/>

You can also override it by specifying the format.

1var curr = cmp.find("curr");
2curr.set("v.format", '£#,###.00');

This example shows how you can bind data from a ui:inputCurrency component. We recommend using lightning:formattedNumber with style="currency" instead of ui:outputCurrency.

1<aura:component>
2    <aura:attribute name="myCurrency" type="integer" default="50"/>
3    <ui:inputCurrency aura:id="amount" label="Amount" class="field" value="{!v.myCurrency}" updateOn="keyup"/>
4 You entered: <ui:outputCurrency value="{!v.myCurrency}"/>
5</aura:component>

Attributes

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

Events

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.

Lightning Components Developer Guide

ui:outputCurrency

Attributes

Events