[SalesForce] Calling Aura.Action attribute from Lightning Controller/Helper

Although not documented very well, you can pass an Aura.Action (essentially a javascript function) as an attribute in a Lightning Component.

For example, the following works.

Parent Component

<aura:component>
   <c:childComponent clickme="{!c.click}"/>
</aura:component>

Parent Controller

({
   click:function(cmp, event, helper){
     console.log('click!');
   }
})

Child Component

<aura:component>
   <aura:attribute name="clickme" type="Aura.Action"/>
   <a onclick="{!v.clickme}">Click Me!</a>
</aura:component>

Clicking the link the fires the action passed in from the parent and the string is logged in the console.

My question is, can I fire the same function passed in from the Child Controller?

Something like:

Child Controller

({
   myFunction: function(cmp, event, helper){
    var clickme = cmp.get('v.clickme');
    clickme.fire();
  }
})

I'm sure it is possible, just not sure on the syntax. Any pointers will be greatly appreciated.

Best Answer

I have not found this documented anywhere (just like you said in your original post), but I have found that you can accomplish this by using $A.enqueueAction(clickme). This also seems to fire immediately because there is no server connection involved so the framework must see that it does not actually need to go in the server queue.

Related Solutions

[SalesForce] How to call child component controller function/helper from Parent Component Controller

The handler name in your child component should match the registered name in the parent component. i.e., the handler in child component should be like this:

  <aura:handler name="clrValues" event="c:ClearValues" action="{!c.clear}"/>

--UPDATE--

I think a better approach for parent-to-child communication is to use <aura:method> as listed in lightning docs and here

To do this, you should define a method in child component like this:

  <aura:method name="sampleMethod" action="{!c.clear}" access="PUBLIC">

You should then have an id when you refer it inside your parent component like this:

  <c:ChildComponent textValue="test" aura:id="cComp"/>

Then in the clear method of the parent component, you should invoke the child method like this:

 var childCmp = component.find("cComp")
 childCmp.sampleMethod();

[SalesForce] How to call child component controller with iteration from parent component controller

Since the child component : <c:ChildComponent aura:id="cComp"/> is inside an iteration, which means the child components generated will have the same aura:id.

As a result of that, var childCmp = component.find("cComp"); returns an Array of Child Component instance rather than one Child Component instance.

So you need iterate for the array of child component instances and call their respective sampleMethod (aura:method).

ParentController.js will look like below:

({
    save: function(component, event, helper) {
        var childCmp = component.find("cComp"); // return array
        for(var i = 0;i < childComp.length;i++){
            childCmp[i].sampleMethod();
        }
    }
})

Best Answer

Related Solutions

[SalesForce] How to call child component controller function/helper from Parent Component Controller

[SalesForce] How to call child component controller with iteration from parent component controller

Related Topic