[SalesForce] Passing Data from Child to Parent in Aura

I am trying to open a modal once clicking on a button which is in the parent component. For that I have used aura:method in the child component and calling that child component in the parent component with a unique aura:id. The code is as below.

Parent.component

<aura:component>
<c:ChildCmp aura:id="showViewDetailsModal" />
                 <lightning:button variant="brand" label="Open Modal" title="Open Modal" onclick="{!c.openViewDetailsModal}" />
</aura:component>

Parent.controller

({
    openViewDetailsModal : function(component, event, helper) {
         component.find('showViewDetailsModal').showViewDetailsMethod(true);
    }
})

Child.component

<aura:component>

    <aura:attribute name="isOpen" type="Boolean" default="false" access="public" />
   
    <aura:method name="showViewDetailsMethod" action="{! c.openViewDetailsModal }" access="public">
        <aura:attribute name="openViewDetails" type="Boolean" default="false" />
    </aura:method>

    <aura:if isTrue="{!v.isOpen}">
        <div role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
            aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <div class="slds-modal__header">
                    <lightning:buttonIcon iconName="utility:close" onclick="{! c.closeModal }" alternativeText="close"
                        variant="bare-inverse" class="slds-modal__close" />
                    <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">
                        Program Detail</h2>
                </div>
            </div>
        </div>
    </aura:if>
</aura:component>

Child.Controller

({
    openViewDetailsModal : function(component, event, helper) {
        var params = event.getParam( 'arguments' ) || event.getParam();
        component.set('v.isOpen',params.openViewDetails);
    },
        
    closeModal : function(component, event, helper) {
        component.set('v.isOpen',false);
    },
})

The error is as below.

Action failed: c:ChildCmp$controller$openViewDetailsModal [component.find(...).showViewDetailsMethod is not a function] Failing descriptor: {c:SAPProgramSearchGetDataComponent$controller$openViewDetailsModal}

Can someone help me to solve this isuue?

Best Answer

I tried your code and it works well. Few pointers when working with Lightning.

  1. Check if your code is deployed properly.
  2. Always use Ctrl+Shift+R to reload the browser when testing an aura component.
  3. Try clearing your browser cache and cookies and then reload the browser again.

Just FYI : Avoid using var, try using const or let.

NOTE

I just added an extra implements="flexipage:availableForAllPageTypes" in your parent component to just make the component available on the flexipage, so as to test this. That shouldn't make any difference though.

Related Topic