Setting Attributes on a Component Reference

When you include another component, such as <ui:button>, in a component, we call that a component reference to <ui:button>. You can use <aura:set> to set an attribute on the component reference. For example, if your component includes a reference to <ui:button>:

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<ui:button label="Save">
18    <aura:set attribute="buttonTitle" value="Click to save the record"/>
19</ui:button>
20

This is equivalent to:

1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<ui:button label="Save" buttonTitle="Click to save the record" />
18

The latter syntax without aura:set makes more sense in this simple example. You can also use this simpler syntax in component references to set values for attributes that are inherited from parent components.

aura:set is more useful when you want to set markup as the attribute value. For example, this sample specifies the markup for the else attribute in the aura:if tag.

1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18    <aura:attribute name="display" type="Boolean" default="true"/>
19    <aura:if isTrue="{!v.display}">
20        Show this if condition is true
21        <aura:set attribute="else">
22           <ui:button label="Save" press="{!c.saveRecord}" />
23        </aura:set>
24    </aura:if>
25</aura:component>

Lightning Components Developer’s Guide

Setting Attributes on a Component Reference

See Also: