ui:outputNumber

A ui:outputNumber component represents a number output that is rendered as an HTML span tag. This component can be used with ui:inputNumber, which takes in a number input. ui:outputNumber retrieves the locale information and displays the number in the given decimal format. To display a number, you can use an attribute value and bind it to the ui:outputNumber component.

1<aura:attribute name="myNum" type="Decimal" default="10.10"/>
2<ui:outputNumber value="{!v.myNum}" format=".00"/>

The previous example renders the following HTML.

1<span class="uiOutputNumber">10.10</span>

This example retrieves the value of a ui:intputNumber component, validates the input, and displays it using ui:outputNumber.

1<aura:component> 
2 <ui:inputNumber aura:id="inputCmp" label="Enter a number: "/> <br/>
3    <ui:button label="Submit" press="{!c.validate}"/>
4    <ui:outputNumber aura:id="outNum" value=""/>
5</aura:component>

1({
2    validate : function(component, evt) {
3        var inputCmp = component.find("inputCmp");
4        var value = inputCmp.get("v.value");
5
6        var myOutput = component.find("outNum");
7        myOutput.set("v.value", value);
8
9        // Check if input is numeric
10        if (isNaN(value)) {
11            inputCmp.set("v.errors", [{message:"Input not a number: " + value}]);
12        } else {
13            inputCmp.set("v.errors", null);
14        }
15    }
16})

Attributes

Events