[SalesForce] Call function in child component from the parent component

I have a child component inside my parent component as below:

<aura:iteration items="{!v.articolo.items}" var="item">
    <c:RigaTabellaItemsKit item="{!item}" PicklistStatoKit_SelVal="{!v.PicklistStatoKit_SelVal}" aura:id="item_in_kit"/>
</aura:iteration>

During some operation inside the Helper of the parent component, I should call a function defined inside the child component.

Helper (Parent):

var pesi_value = component.get("v.pesi");
var articoloKit = component.get("v.articolo");
var itemsInKit = articoloKit.items;
var value1 = 2.0;

for (var i = 0; i < pesi_value.length; i++){
    itemsInKit[i].voce.Prezzo_totale__c = value1 * pesi_value[i];
    //here I should call a function inside the child component.
}

Assume that the function which I want to call is as described inside the Helper of the child as below:

calcolaRicarico : function(component, event, helper) {
    helper.calcolaRicarico(component, event);
}

How could I do that?

Best Answer

you can call using aura:method by using aura:id

<c:RigaTabellaItemsKit  aura:id="item_in_kit"/>

Helper (Parent):

cmp.find("item_in_kit").calcolaRicarico();

In child:

<aura:method name="calcolaRicarico" action="{!c.calcolaRicarico}" />

Related Solutions

[SalesForce] Lightning: How to call js controller function on one component from js controller function on another component

You could use Application Events to facilitate communications between controllers without creating a strong coupling between them. The documentation has a whole section on them which should get you off to a good start:

Create Custom Application Event

You can create custom application events using the <aura:event> tag in a .evt resource. Events can contain attributes that can be set before the event is fired and read when the event is handled.

Use type="APPLICATION" in the <aura:event> tag for an application event. For example, this is an application event with one message attribute.
<aura:event type="APPLICATION">
     
     <aura:attribute name="message" type="String"/>
</aura:event>
The component that handles an event can retrieve the event data. To retrieve the attribute in this event, call event.getParam("message") in the handler’s client-side controller.

Register Application Event

A component registers that it may fire an application event by using <aura:registerEvent> in its markup. Note that the name attribute is required but not used for application events. The name attribute is only relevant for component events. This example uses name="appEvent" but the value is not used anywhere.
<aura:registerEvent name="appEvent" type="auradocs:appEvent"/>
Fire Application Event

Use $A.get("e.myNamespace:myAppEvent") in JavaScript to get an instance of the myAppEvent event in the myNamespace namespace. Use fire() to fire the event.
var appEvent = $A.get("e.auradocs:appEvent"); // set some data for the event (also known as event shape)
//appEvent.setParams({ ... });
appEvent.fire();
Handle Application Event

Use <aura:handler> in the markup of the handler component. The action attribute of <aura:handler> sets the client-side controller action to handle the event. For example:
<aura:handler event="auradocs:appEvent"
 action="{!c.handleApplicationEvent}"/>
When the event is fired, the handleApplicationEvent client-side controller action is called.

[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();

Best Answer

Related Solutions

[SalesForce] Lightning: How to call js controller function on one component from js controller function on another component

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

Related Topic