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. We recommend using lightning:formattedNumber instead of ui:outputNumber.

ui:outputNumber can be used with ui:inputNumber, which takes in a number input. To apply Lightning Design System styling, we recommend that you use lightning:input with type="number" instead of ui:inputNumber.

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.

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

The previous example renders the following HTML.

<span>10.10</span>

This example retrieves the value of a ui:intputNumber component, validates the input, and displays it using ui:outputNumber. To apply Lightning Design System styling, we recommend that you use lightning:input with type="number" instead of ui:inputNumber. Similarly, we recommend using lightning:formattedNumber instead of ui:outputNumber.

<aura:component> 
    <aura:attribute name="myNumber" type="integer" default="10"/>
 <ui:inputNumber label="Enter a number: " value="{!v.myNumber}" updateOn="keyup"/> <br/>
    <ui:outputNumber value="{!v.myNumber}"/>
</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.
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 Decimal The number displayed when this component is rendered. 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.