+ Start a Discussion
harry.kimharry.kim 

Can I call an other component's function in modal component

Hello.

I had created a modal component when I click a button like below.

createGroup : function(component, event, helper) {
        
        $A.createComponent(                
            "c:NLPCreatePublicGroup",                                
            {    
                "aura:id": "NLPCreatePublicGroup"
            },function(newCmp){
                component.set("v.modal", newCmp);
            }
        );
    },

I want to call a function of another component by pressing a certain button in this component.

So, I had made an lightning event component named 'NLPRefreshRole'
Then registered the event in a modal component and insert the code that activates the event.

<aura:registerEvent name="refreshRole" type="c:NLPRefreshRole"/>

var evt = component.getEvent("roleClickEvt");
evt.fire();

Then I put the following handler in the target component
<aura:handler name="refreshRole" event="c:NLPRefreshRole" action="{!c.renderTreeN}"/>

But it does not work properly.

How can I call the other component's function in modal component ?

 
MKRMKR
Hi,

Does it make any difference if you change the event name in component.getEvent to "refreshRole" like this.
var evt = component.getEvent("refreshRole");
evt.fire();
Regards,
Miika
Ajay K DubediAjay K Dubedi
Hi Ajay,

To call a function of 2nd component by pressing a certain button on 1st component try the following:

1st Component:

<aura:component >
    <aura:attribute name = "Cmp2" type = "Boolean" default = "false"/> <!--Make Same attribute in both Components-->
    <lightning:button label = "Click to run another component" onclick = "{!c.handleClick}"/>
    {!v.body}
</aura:component>

({
    handleClick : function(c, e, h) {
        $A.createComponent('c:TestComponent2', {
        'Cmp2': c.getReference('v.Cmp2'),
        
        }, function (contentComponent, status, error) {
            if (status === "SUCCESS") {
                console.log('SUCCESS');
                c.set('v.Cmp2',true);
                c.set('v.body',contentComponent);
            } else {
                console.log('FAIL');
                
            }
        });
        
    }
})

2nd Component:

<aura:component >
    <aura:attribute name = "Cmp2" type = "Boolean" default = "false"/><!--Same Component in both Components-->
    <lightning:button label="Click to run function of other cmp" onclick = "{!c.callFunction}"/>
</aura:component>

({
    callFunction : function(c, e, h) {
        console.log('callFunction in 2nd Component called');
    }
})



I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
harry.kimharry.kim
Sorry. It was my mistake.
I had used below code. but it was not working. T.T
var evt = component.getEvent("refreshRole");   // not "roleClickEvt"
evt.fire();

Actually I have the 3 components

1. Parent Component => have a button and It creates the modal component.
2. modal Component => have a button. If I click the button, I would like to call a function in the target component.
3. target Component => hava the function.