[SalesForce] Pass values from parent to child component on click lightning

I have this below code where i am trying to first search an account name and on hit button it displays the result set.

On the button click i am also loading an child component which is displaying the id of the record.

I need the child component should get displayed once i click on the record.

How can i achieve this –

Parent Component – 

<aura:component controller="SimpleAccountController">
    <aura:attribute name="account" type="account[]"/>
    <ui:outputText aura:id="outName" value="" class="text"/>
    <ui:inputText aura:id="name" label="Enter Name:" placeholder="Your Name" />
    <ui:button aura:id="button" buttonTitle="Click to see what you put into the field" class="button" label="Click me" press="{!c.getInput}"/>
    <aura:iteration var="acc" items="{!v.account}">
            <a onclick="{!c.accountselected}" data-recId="{!acc.Id}">
        <p>{!acc.Name} : {!acc.Type} : {!acc.Industry} : {!acc.Rating}</p>
            </a>
        <c:HelloWorkdChildCmp selectedaccount="{!acc.Id}" />
    </aura:iteration>
</aura:component>

COntroller – 

({
    getInput : function(cmp, evt) {
        var myName = cmp.find("name").get("v.value");
        var myText = cmp.find("outName");
        var greet = "Hi, " + myName;
        myText.set("v.value", greet);
        var action = cmp.get("c.seaAcc");
        action.setParams({ "s" : myName });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set("v.account", response.getReturnValue());
                //alert("From server: " + response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },

    accountselected : function(cmp, evt) {
       console.log(evt.currentTarget.getAttribute("data-recId")) ;
    }

})

Child component – 

<aura:component >
    <aura:attribute name="selectedaccount" type="String"/>
    <div>Id: {!v.selectedaccount}</div>
</aura:component>

Best Answer

This question falls into Parent to child integration pattern so there are multiple solutions

1. aura:attribute:

   Aura:Attribute is most commonly used communication pattern where parent component can initialize and pass value at later time.

    <c:HelloWorkdChildCmp selectedaccount="{!acc.Id}" anotherattribute="VALUE" />

2. Aura:Method:

This enables you to directly call a method in a child component’s client-side controller instead of firing and handling a component event. Using simplifies the code needed for a parent component to call a method on a child component that it contains. It is done using aura:id.

Child Component

<aura:component>
    <aura:method name="sampleMethod" action="{!c.doAction}"
  description="Sample method with parameters"> 
    <aura:attribute name="param1" type="String" default="parameter 1"/> 
    <aura:attribute name="param2" type="Object" /> 
</aura:method>
</aura:component>

Child component.js

({
    doAction : function(cmp, event) {
        var params = event.getParam('arguments');
        if (params) {
            var param1 = params.param1;
            // add your code here
        }
    }
})

Parentcomponent.cmp

<aura:component>
    <c:ChildComponent aura:id="compB"/>
        <lightning:button label="Call child method" onclick="{! c.onAction}" />

</aura:component>

Parentcomponent.js

({
    onAction : function(component, event, helper) {
        var objCompB = component.find('compB');
        objCompB.sampleMethod("Param1", "Param2");
    }
})

3. Application event

Application events follow a traditional publish-subscribe model. An application event is fired from an instance of a component. All components that provide a handler for the event are notified.

applicationevent.evt

<!--c:aeEvent-->
<aura:event type="APPLICATION">
    <aura:attribute name="message" type="String"/>
</aura:event>

Parent component

/* aeNotifierController.js */
{
    fireApplicationEvent : function(cmp, event) {
        // Get the application event by using the
        // e.<namespace>.<event> syntax
        var appEvent = $A.get("e.c:aeEvent");
        appEvent.setParams({
            "message" : "An application event fired me. " +
            "It all happened so fast. Now, I'm everywhere!" });
        appEvent.fire();
    }
}

childcomponenthandler.js

/* aeHandlerController.js */
{
    handleApplicationEvent : function(cmp, event) {
        var message = event.getParam("message");

        // set the handler attributes based on event data
        cmp.set("v.messageFromEvent", message);
        var numEventsHandled = parseInt(cmp.get("v.numEvents")) + 1;
        cmp.set("v.numEvents", numEventsHandled);
    }
}
Related Topic