13

I have requirement to call a child controller function from parent controller whenever the event occurs in parent side.

for e.g

ABC is parent component and DCE is child component, this child component has Span of Text tag and X symbol. when I click on x it is clearing the value using child controller. ABC parent component has Form element and child component is one one of in form.

My requirement is to clear the this child component value when parent component button is clicked.

here is the below sample code of what am trying because i cannot post actual code here

ParentComponent.cmp

 <aura:registerEvent name="clrValues" type="c:ClearValues"/>
    <div>
         <c:ChildComponent textValue="test"/>
         <ui:button label="Save"/>
         <ui:button label="Clear" press="{!c.clear}"/>      
    </div>
 </aura:component>

ParentController.js

({
    clear : function(component, event, helper) {
        var evtFire = component.getEvent("clrValues");

        evtFire.fire();
    }
})

ClearValues.evt

<aura:event type="APPLICATION" description="Event template" />

ChildComponent.cmp

<aura:component >
    <aura:handler name="setValues" event="c:ClearValues" action="{!c.clear}"/>
    <aura:attribute name="textValue" type="String" default="test"/>
    <div >
    <ui:inputText label="Expense Name" value="{!v.textValue}" aura:id="input1"/>
    </div>

</aura:component>

ChildController.js

({
    clear : function(component, event, helper) {
        helper.clearValues(component,event);
    }
})
2
  • 2
    Unless you provide the code ,its hard to help you May 18, 2016 at 14:56
  • Mohit , added the code i cannot post my original code, but i have given sample what i was trying to achieve.
    – Raj_SFDC
    May 19, 2016 at 11:14

2 Answers 2

23

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();
2
  • It applies only for component level event,not for an Application Event.
    – Praveen
    May 20, 2016 at 6:59
  • hmm that's true. I didn't notice this is an application event. @Raj_SFDC, why can't you make your event a component event? May 20, 2016 at 17:26
1

Application Event handler should not contain name attribute just the event and action attribute is enough as mentioned here.

This is how an application event should be fired in your clear method:

({
    clear : function(component, event, helper) {
        $A.get("e.c:clrValues").fire();
    }
})

For more info,look at the section on application event in the doc.

4
  • No luck with that too, my assumption is we cannot handle event in child from parent. please confirm
    – Raj_SFDC
    May 20, 2016 at 9:13
  • @Raj_SFDC we can fire an application event from the parent to child.With that said,you are doing in incorrectly.I have updated my answer,please look at it.
    – Praveen
    May 20, 2016 at 17:51
  • I have one question here from above[ $A.get("e.c:clrValues")] , how get attribute value.
    – Raj_SFDC
    May 25, 2016 at 14:36
  • 1
    are you referring to Event parameters?if so you can set it using $A.get("e.c:clrValues").setParams({'message':'test'}) and fire the event,then in the handler method you can use $A.get("e.c:clrValues").getParam('message') to get the value back.
    – Praveen
    May 27, 2016 at 8:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .