ui:outputText | Lightning Components Developer's Guide

A ui:outputText component represents text output that is wrapped in an HTML span tag. This component can be used with ui:inputText, which takes in a text input. To display text, you can use an attribute value and bind it to the ui:outputText component.

1<aura:attribute name="myText" type="String" default="some string"/>
2<ui:outputText value="{!v.myText}" label="my output"/>

The previous example renders the following HTML.

1<span dir="ltr" class="uiOutputText">
2    some string
3</span>

This example shows how you can bind data from an ui:inputText component.

1<aura:component>
2 <ui:inputText aura:id="name" label="Enter some text" class="field" value="My Text"/>
3    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
4
5 <div aura:id="msg" class="hide">
6  You entered: <ui:outputText aura:id="oName" value=""/> 
7 </div>
8</aura:component>

1({
2	 setOutput : function(component, event, helper) {
3		var cmpMsg = component.find("msg");
4	    $A.util.removeClass(cmpMsg, 'hide');
5	    
6        var name = component.find("name").get("v.value");
7        var oName = component.find("oName");
8        oName.set("v.value", name); 
9	 }
10})

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.
`value`	String	The text displayed when this component is rendered.	Yes

Events

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