How to pass attributes from parent to child component in salesforce lightning

Find an easy way to pass the attributes from the parent aura component to the child component in the salesforce lightning framework.

ParentComponent.js

<aura:component implements="flexipage:availableForRecordHome" access="global" >

          <aura:attribute name="ParentAtt"  type="String[]" default="['red','green','blue']"/>

    <div style='border: 1px solid black; padding:20px;'>

        <div>parent component!</div>

        <c:ChildComponent ParAttValue = '{!v.ParentAtt}' />

    </div>

</aura:component>

 In the parent component, we have created a new attribute to store the list of strings and setting default values and also included a reference to the child component to which we are passing this list of strings from the parent component attributes as an input to the child component.

ChildComponent.js

<aura:component  implements="flexipage:availableForRecordHome" access="global">

    <aura:attribute name="ParAttValue" type="String[]"/>

    <div style='border: 1px solid black; padding:20px;'>

        <span>Child component! </span>

        <br/>

        <span>list of string from the parent are below</span>

        <aura:iteration items="{!v.ParAttValue}" var="s">

            <br/>

            {!s}

        </aura:iteration>

    </div>

</aura:component>

In the child component, we are receiving the parent attribute value as an input parameter and iterating the list of strings using aura:iteration and displaying all the values in the component.

Output

We can also use aura methods or events to communicate between the components in the Salesforce lightning framework. In case of any doubts, please feel free to add it in the comments section below.

READ MORE

Salesforce lightning interview questions – Part 1

Salesforce lightning interview questions – Part 2