function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
NM AdminNM Admin 

How to close the popup model on parent component from child component on button click.?

Hello,

Greetings!

Need help to achieve the below task:

I have a lightning component like this:
Component A: Grand Parent Component
Component B: Parent Component
Component C: Child Component

I have a button 'Add Equip' on the grandparent component(Component A). On click of the button, one model is being populated(In the same model I am calling child component(B)). On child component(Component B), I have a button 'Next' on click of the button I want to close the model which is already populated.

Can anybody come across the requirement like this?


Welcome to your suggestions!

Thanks,
Maharajan CMaharajan C
Hi,

Please follow the below steps to achive this:

1. Add the new boolean Attribute in Grand Parent Component

<aura:attribute name="showdialog" type="boolean" default="false"/>


2. Set the above attribute value as true in Grand Parent Component button click (Add Equip) to open the dialog based on the above boolean attribute:

In button click js method set the component.set("v.showdialog",true);

and use the aura:if condtion to open the dialog:

    <aura:if isTrue="{!v.showdialog}">

      <----   dialog box slds code here --> 

<section 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> </section >

    </aura:if>


3. create the new component event with simple below code : Name as closedialogcmpevent

<aura:event type="COMPONENT">
</aura:event>

4. Register the above event in the component ( Component B ) -  with the below line
<aura:registerEvent name="compEvent" type="c:closedialogcmpevent"/>

5. In the Next button click from the component B fire the event from JS:

Next :function(component,event,helper)
    {
        var cmpEvent = component.getEvent("compEvent");
        cmpEvent.fire();
    }

6. Add the below line in grand parent component to handle the component event fire :

    <aura:handler name="compEvent" event="c:c:closedialogcmpevent" action="{!c.closeModel}"/> 

    closeModel: function(component, event, helper) {
        component.set("v.showdialog", false);
    }


This will solve issue friend i have also used this logic surely it will works : 

If component event not works then use the Application but in your case you don't have to worry surely cmp event works because the component's are in hierarchy.

Can you please Let me know if it helps or not!!!

If it helps don't forget to mark this as a best answer!!!


Thanks,
Maharajan.C