ui:outputEmail

A ui:outputEmail component represents an email output that is wrapped in an HTML span tag. This component can be used with ui:inputEmail, which takes in an email input. The email output is wrapped in an HTML anchor element and mailto is automatically appended to it. This is a simple set up of a ui:outputEmail component.

1<ui:outputEmail value="abc@email.com"/>

The previous example renders the following HTML.

1<span><a href="mailto:abc@email.com" class="uiOutputEmail">abc@email.com</a></span>

This example shows how you can bind data from a ui:inputEmail component.

1<aura:component>
2    <ui:inputEmail aura:id="email" label="Email" class="field" value="manager@email.com"/>  
3    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
4
5 <div aura:id="msg" class="hide">
6     You entered: <ui:outputEmail aura:id="oEmail" value="Email" />
7 </div>
8
9</aura:component>

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

Attributes

Events