How to use aura:set in Salesforce Lightning?

How to use aura:set in Salesforce Lightning?

aura:set -

<aura:set > is used to set the value of an attribute inherited from a parent component, event, or to set the value of the attribute of a component reference.

aura:set can be used in two aspects:

  1. Setting Attributes on a Component Reference.
  2. Setting Attributes Inherited from a Super Component.

Setting Attributes on a Component Reference:

Component reference:

Including another component such as Lightning :accordion in a component is called the component reference to that component. Here it is called the component reference to Lightning :accordion.

Advertisement

Aura:set can be used to set the value of an attribute on the component reference. In case of <ui:button>, it can be used to set the value of attribute on <ui:button>. Here, for example, we will use aura:set to set the value 'buttonTitle' attribute of ui:button.

Below Is a Snippet of code of Lightning Component. In this Lightning Component, we are setting the value for ‘buttonTitle’ attribute of ui:button.

<aura:component> 
   <ui:button label="”Save”"> 
       <aura:set attribute="”buttonTitle”" value="”Click" to="" save="" the="" record=""></aura:set> 
   </ui:button> 
</aura:component>

When you preview the above Lightning Component and hover the mouse on the Save button you will see the button title value has set to ‘Click to save the record’. Below Is the screenshot of Previe:

AuraSet1

Setting Attributes Inherited from a Super Component:

Aura:set can be used to set the value attribute of parent component in the markup of the child component.

Below is the snippet of code for parent and child component respectively:

Parent Component:

<aura:component extensible="”true”"> 
   <aura:attribute name="”address1″" type="”String”"></aura:attribute> 
   setTagSuper address1: {!v.address1}a
</aura:component>

Child Component:

<aura:component extends="”c:setTagSuper”">
   <aura:set attribute="”address1″" value="”808" state="" st=""></aura:set>
</aura:component>

Below is the screenshot of a preview of Child Component:

Auraset2

Popular Salesforce Blogs