Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SFDC New learnerSFDC New learner 

How to pass the data from parent to the child component on click of button using lightning web component

Hi All,

 I am trying to pass the contact data from parent to child component on click of a button. Also, hide the parent component and show the child component using the lightning web component.
I have implemented this using lightning component.
Below is the sample code:

Parent component:
-----------------
<aura:component controller="login">
    
    <aura:attribute name="contact" type="Contact"/>
    <aura:registerEvent name="Authorizelogin" type="c:Authorizeloginevent"/>
    <div class="slds-hide" aura:id="login">
        <c:Authorizelogincontactdetails/>
    </div>
    <lightning:input name="UNAME" required="true" type="String" value="{!v.contact.LoginId__c}"/>
    <lightning:input name="PWD" required="true" type="String" value="{!v.contact.Password__c}"/>
    <lightning:button variant="brand" label="Submit" onclick="{!c.handlecontactdetails}"/>
</aura:component>

helper:
------

({
    contact : function(component,event,helper) {
        var action = component.get("c.getcontact");
        action.setParams({
            "uname":component.get("v.UNAME"),
            "pwd" : component.get("v.PWD")
        });
        action.setCallback(this,function(a){
            var response = a.getState();
            if(response==="SUCCESS"){
                var con = response.getReturnvalue();
            var myEvent = $A.get("e.c:Authorizeloginevent"); 
                myEvent.setParams({
                    "contact" : con
                });
                myEvent.fire();
            }
        });
    $A.enqueueAction(action);    
    }
})

child component:
---------------
<aura:component controller="login" >
    <aura:attribute name="FirstName" type="String"/>
    <aura:attribute name="LastName" type="String"/>
    <aura:attribute name="Email" type="String"/>
    <aura:attribute name="Phone" type="Integer"/>
    <aura:handler event="c:Authorizeloginevent" action="{!c.contactdetails}"/>
    <ui:output value="{!v.FirstName}"/>
    <ui:output value="{!v.LastName}"/>
    <ui:output value="{!v.Email}"/>
    <ui:output value="{!v.Phone}"/>
    
</aura:component>
helper:
-------
({
    contactdetails : function(component,event,helper) {
        
        var  con = event.getParam("contact");           
        
        component.find("LastName").set("v.value",con.LastName);
        component.find("FirstName").set("v.value",con.FirstName);
        component.find("Email").set("v.value",con.Email);
        component.find("Phone").set("v.value",con.Phone);
        
    }
})


I have referred to some documentation, recipes. But not able to get the idea on how to do the same in the lightning web component.
Can anyone please give me some sample code or any idea on how to do the same approach using the lightning web component.
Any help would be greatly appreciated.

Thanks
 
Deepali KulshresthaDeepali Kulshrestha
Hi SFDC,
Greetings to you!

- Here is an example to call parent to child component

1. aura:attribute:

   Aura:Attribute is the most commonly used communication pattern where parent component can initialize and pass a value at a 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);
    }
}

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha.
SFDC New learnerSFDC New learner
Hi Deepali,

Thanks for your reply. But my question is how to implement the same approach using the lightning web component.