ui:outputTextArea

A ui:outputTextArea component represents text output that is wrapped in an HTML span tag. We recommend using lightning:formattedText instead of ui:outputText.

ui:outputTextArea can be used with ui:inputTextArea, which takes in a multiline text input. To apply Lightning Design System styling, we recommend that you use lightning:textarea instead of ui:inputTextArea.

To display text, you can use an attribute value and bind it to the ui:outputTextArea component. A ui:outputTextArea component displays URLs and email addresses as hyperlinks.

1<aura:attribute name="myTextArea" type="String" default="some string"/>
2<ui:outputTextArea value="{!v.myTextArea}"/>

The previous example renders the following HTML.

1<span class="uiOutputTextArea">some string</span>

This example shows how you can bind data from the ui:inputTextArea component. To apply Lightning Design System styling, we recommend that you use lightning:textarea instead of ui:inputTextArea.

1<aura:component>
2     <ui:inputTextArea aura:id="comments" label="Comments"  value="My comments" rows="5"/>
3     <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
4     
5     <div aura:id="msg" class="hide">
6  You entered: <ui:outputTextArea aura:id="oTextarea" 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 comments = component.find("comments").get("v.value");
7        var oTextarea = component.find("oTextarea");
8        oTextarea.set("v.value", comments);
9    }
10})

Attributes

Events