ui:outputNumber

Displays the number in the default or specified format. Supports up to 18 digits before the decimal place.

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 browser's 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>

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({  
18    validate : function(component, evt) {
19        var inputCmp = component.find("inputCmp");
20        var value = inputCmp.get("v.value");
21        
22        var myOutput = component.find("outNum");
23        
24        myOutput.set("v.value", value);
25        
26        // Check if input is numeric
27        if (isNaN(value)) {
28            // Set error message
29            inputCmp.setValid("v.value", false);
30            inputCmp.addErrors("v.value", [{message:"Input not a number: " + value}]);
31        } else {
32            // Clear error
33            inputCmp.setValid("v.value", true);
34        }
35    }
36})

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.
`format`	String	The format of the number. For example, format=“.00” displays the number followed by two decimal places. If not specified, the Locale default format will be used.
`value`	BigDecimal	The number displayed when this component is rendered.	Yes

Events

Event Name	Event Type	Description
`mouseup`	COMPONENT	Indicates that the user has released the mouse button.
`mousedown`	COMPONENT	Indicates that the user has pressed a mouse key.
`mousemove`	COMPONENT	Indicates that the user has moved the mouse pointer.
`dblclick`	COMPONENT	Indicates that a component has been double-clicked.
`mouseout`	COMPONENT	Indicates that the user has moved the mouse pointer away from the component.
`click`	COMPONENT	Indicates that a component has been clicked.
`mouseover`	COMPONENT	Indicates that the user has moved the mouse pointer over the component.

Lightning Components Developer’s Guide

ui:outputNumber

Attributes

Events