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.
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.