ui:outputEmail

Displays an email address in an HTML anchor (<a>) element. The leading and trailing space are trimmed.

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.

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

The previous example renders the following HTML.

<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.

<aura:component>
    <ui:inputEmail aura:id="email" label="Email" class="field" value="manager@email.com"/>  
    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 

 <div aura:id="msg" class="hide">
     You entered: <ui:outputEmail aura:id="oEmail" value="Email" />
 </div>

</aura:component>
({
    setOutput : function(component, event, helper) {
    	var cmpMsg = component.find("msg");
    	$A.util.removeClass(cmpMsg, 'hide');
    	
        var email = component.find("email").get("v.value"); 
        var oEmail = component.find("oEmail");
        oEmail.set("v.value", email);
        
    }
})

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 output value of the email 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.