Setting Label Values via a Parent Attribute

Setting label values via a parent attribute is useful if you want control over labels in child components.

Let’s say that you have a container component, which contains another component, inner.cmp. You want to set a label value in inner.cmp via an attribute on the container component. This can be done by specifying the attribute type and default value. You must set a default value in the parent attribute if you are setting a label on an inner component, as shown in the following example.

This is the container component, which contains a default value My Label for the _label attribute .

1	<aura:component>

2	<aura:attribute name="_label"

3	type="String"

4	default="My Label"/>

5	<lightning:button label="Set Label" aura:id="button1" onclick="{!c.setLabel}"/>

6	<auradocs:inner aura:id="inner" label="{!v._label}"/>

7	</aura:component>

This inner component contains a text area component and a label attribute that’s set by the container component.

1	<aura:component>

2	<aura:attribute name="label" type="String"/>

3	<lightning:textarea aura:id="textarea"

4	name="myTextarea"

5	label="{!v.label}"/>

6	</aura:component>

This client-side controller action updates the label value.

1

({

2	setLabel:function(cmp) {

3	cmp.set("v._label", 'new label');

4

}

5

})

When the component is initialized, you’ll see a button and a text area with the label My Label. When the button in the container component is clicked, the setLabel action updates the label value in the inner component. This action finds the label attribute and sets its value to new label.