Pass variables from Parent to Child Component in Lightning Component Salesforce | Parent to Child integration.

Kapil May 06, 2020


Hello folks, in this article I will explain how you can send value from a Parent Component to Child Component. 

There could be multiple solutions for this, I will explain here how you can use "aura:attribute" & "Application event" to pass the data from Parent component to Child component.

Method 1 : Using aura:attribute
In below example I am passing the variable to the child component using the aura:attribute on the button's click of the Parent Component.

ParentComponent.cmp
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="parentValue" type="String" />
	<h1>Hello, I am Parent Component</h1>
    <div class="row">
        <lightning:button label="Send value to child" iconName="utility:comments" iconPosition="left"  variant="brand" onclick="{! c.sendValue }" />
    </div>
    <br/>
    <br/>
    <c:ChildComponent childValue="{!v.parentValue}" />
</aura:component>

ParentComponentController.js
1
2
3
4
5
({
	sendValue : function(component, event, helper) {
		component.set("v.parentValue","I am value from Parent");
	}
})


ChildComponent.cmp
1
2
3
4
5
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="childValue" type="String" />
	<h1>Hello, I am Child Component. Here is the value from Parent : {!v.childValue}</h1>
    
</aura:component>



Method 2 : Using Application Event
In below example I am passing the variable to the child component using the Application Event on the button's click of the Parent Component.


ParentChildEvent.evt
1
2
3
<aura:event type="APPLICATION">
    <aura:attribute name="parentVar" type="String"/>
</aura:event>

ParentComponent.cmp
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:registerEvent name="dataTransfer" type="c:ParentChildEvent"/>
    <h1>Hello, I am Parent Component</h1>
    <div class="row">
        <lightning:button label="Send value to child" iconName="utility:comments" iconPosition="left"  variant="brand" onclick="{! c.sendValue }" />
    </div>
    <br/>
    <br/>
    <c:ChildComponent />
</aura:component>


ParentComponentController.js
1
2
3
4
5
6
7
({
	sendValue : function(component, event, helper) {
        var appEvent = $A.get("e.c:ParentChildEvent");               
        appEvent.setParams({"parentVar":"Hello I am value from Parent"});                                               
        appEvent.fire(); 
    }
})


ChildComponent.cmp
1
2
3
4
5
6
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler action="{!c.getEvents}" event="c:ParentChildEvent" />
    <aura:attribute name="childValue" type="String" />
	<h1>Hello, I am Child Component. Here is the value from Parent : {!v.childValue}</h1>
    
</aura:component>


ChildComponentController.js
1
2
3
4
5
6
({
	getEvents : function(component, event, helper) {
        var evtValue = event.getParam("parentVar");
        component.set("v.childValue",evtValue);
	}
})




If you have any question please leave a comment below.
If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Keep Coding 😊


Tags:

Post a Comment

2 Comments

  1. UnknownSeptember 23, 2021 at 8:14 PM

    Please make it readable, your code snippets are very difficult to read.

    ReplyDelete
    Replies
    1. KapilSeptember 23, 2021 at 9:30 PM

      Hi I have updated it, it was due to recent theme change. Thanks for letting me know !

      Delete