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. 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>
    <ui:inputCurrency aura:id="amount" label="Amount" class="field" value="50"/>
    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 

 <div aura:id="msg" class="hide">
  You entered: <ui:outputCurrency aura:id="oCurrency" value=""/>
 </div>
</aura:component>
({
	 setOutput : function(component, event, helper) {
		var cmpMsg = component.find("msg");
	    $A.util.removeClass(cmpMsg, 'hide');
	    	
        var amount = component.find("amount").get("v.value");
        var oCurrency = component.find("oCurrency");
        oCurrency.set("v.value", amount);
	 }
})

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 BigDecimal 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.