Tuesday, May 21, 2019

Aura:method in lightning component

Till now we have seen how to handle communication between component's using events, now we will see how we can directly call a child component controller method from parent component controller method using Aura:method.

Sample syntax of Aura:method: (Declared in child)

<aura:method name="testMethod" action="{!c.someAction}"

  description="Test aura method with test parameter">

    <aura:attribute name="Test1" type="String" />  <!--optional parameter-->


</aura:method>

Note:  


  • Aura method can have an optional parameters. We use <aura:attribute> tag in Aura:method to declare parameter.


  • We do not need access system attribute in <aura:attribute> tag.


How to call aura:method from parent controller:


childComponentName.auraMethodNameInChildController("Some Value we are passing to child component attribute");


Now let us see the use with simple example,

ParentComp:

<aura:component>

    <aura:attribute name="parentAttributeName" type="String" default="Parent Value"/>

    <p>
 {!v.parentAttributeName}
   </p>

    <c:ChildComp aura:id="ChildComp" />    <!-- Giving id to child comp-->

    <lightning:button label="Go to aura method"
          onclick="{!c.gotoAuraMethod}"/>

</aura:component>

ParentCompController.js

({
gotoAuraMethod : function(component, event, helper) {
       
        var chldComp=component.find("ChildComp");  //  Finding child component
        var res=chldComp.testMethod("From parent");  //   Hitting aura method
        component.set("v.parentAttributeName",res);   
       
       
}
})

ChildComp:

<aura:component>

<aura:method name="testMethod" action="{!c.someAction}"
  description="Test aura method with test parameter">

    <aura:attribute name="childAttributeName" type="String" />

</aura:method>

</aura:component>

ChildCompController.js:


({
someAction : function(component, event, helper) {
                 
     var params=event.getParam('arguments');
        if(params)
        {
           var param1=params.childAttributeName;
           
        }
       return param1+"Appended child value";
}
})

Application:


<aura:application extends="force:slds" >
    <c:ParentComp/>
</aura:application>

Output:

**********************************************************************************************************
After previewing application,

Aura:method in lightning component
**********************************************************************************************************


After clicking "Go to aura method" button,

Aura:method in lightning component



**********************************************************************************************************

No comments:

Post a Comment