Sunday, February 25, 2018

Covered Aura:Method, Aura.Action, ParenttoChild, ChildtoParent and Sibling Communication.

Below code Covers Aura:Method, Aura.Action, ParenttoChild, ChildtoParent and Sibling Communication in one Single Application.



Step 1:

=========
componentEvents
=========
<aura:event type="COMPONENT" description="Event template" >
 
    <aura:attribute name="firstnumber" type="Integer" />
     <aura:attribute name="secondnumber" type="Integer" />
 
</aura:event>

Step 2:
==============
childcomp
===========
<aura:component>
  <aura:attribute name="childoutput" type="Integer" />

  <aura:attribute name="clickme" type="Aura.Action" />

  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <aura:registerEvent name="cmp1" type="c:componentEvents" />
 
 
   <lightning:card title="Child 1">
 
  <lightning:input type="integer" label="Number 1" aura:id="num1" />
  <lightning:input type="integer" label="Number 2" aura:id="num2" />

  <p
    ><lightning:button
      label="Component Event"
      onclick="{!c.fireComponentEvent}" variant="brand"
    />
  </p>

  <p
    ><lightning:button
      label="Parent Method calling with Aura.action"
      onclick="{!v.clickme}" variant="brand"
    />
  </p>
     
       </lightning:card>
</aura:component>

==============
childcomp controller
===========

({
child : function(component, event, helper) {
     
        var output=parseInt(event.getParam("firstnumber")) +parseInt(event.getParam("secondnumber"));
     
       component.set("v.childoutput",output);

},
 
    fireComponentEvent : function(component, event) {
        // Get the component event by using the
        // name value from aura:registerEvent
    var cmpEvnt=component.getEvent("cmp1");
    var num1=parseInt(component.find("num1").get("v.value"));
    var num2=parseInt(component.find("num2").get("v.value"));
     
    cmpEvnt.setParams({"firstnumber":num1,"secondnumber":num2});
        cmpEvnt.fire();
    },
    doInit :function(component, event, helper){
     
       // component.set("v.childoutput",10000);
    }

})

Step 3:

=========
childcomp2
========

<aura:component >
 
     <aura:attribute name="prntoutput" type="Integer" default="0"/>
    <aura:method name="Addition" action="{!c.Addition}" description="Sample method with parameters">
    <aura:attribute name="param1" type="Integer" />
    <aura:attribute name="param2" type="Integer" />
    </aura:method>
    <br/>
    <br/>
    <br/>
     <lightning:card title="Child 2">
    <p>Sibling out put</p>
    {!v.prntoutput}
    <br/>
    <br/>
    <br/>
    </lightning:card>
</aura:component>

================

({
Addition : function(component, event, helper) {
         var params = event.getParam('arguments');
        if (params) {
            var param1= params.param1;
            var param2= params.param2;
            var output=param1+param2;
        }
     
        component.set("v.prntoutput",output);

}
})

Step 4:

parentComp
==========
<aura:component >
    <aura:attribute name="prntoutput" type="Integer" />
  <aura:handler name="cmp1" event="c:componentEvents" action="{!c.parent}" />
 
    <lightning:card title="Parent output">
 
    {!v.prntoutput}
 
   </lightning:card>
     <br/>
    <br/>
    <br/>
 
     <c:childcomp />

     <c:childcomp2 aura:id="sibling"   />
 
 
 
   <!--   <c:childcomp clickme="{!c.Parentmethod}"  />  -->
 
   <!--   <c:childcomp cmp1="{!c.parent}"/> -->

 
</aura:component>


====
parentComp controller
=====

({
parent : function(component, event, helper) {
     
        var fnumber=parseInt(event.getParam("firstnumber"));
        var snumber=parseInt(event.getParam("secondnumber"));
        var output=fnumber+snumber;
     
       component.set("v.prntoutput",output);
     
        var childCmp = component.find("sibling");

      childCmp.Addition(fnumber,snumber);
     
     

},
    Parentmethod:function(component, event, helper) {
     
      alert("From Parent Method");
     
     

}
})

Step 5:
==================
Grantparent
==============

<aura:component implements="flexipage:availableForAllPageTypes" >
    <aura:attribute name="prntoutput" type="Integer" />
     <aura:attribute name="parentdata" type="Integer" default="100000" />
     <aura:handler name="cmp1" event="c:componentEvents" action="{!c.Grandparent}" />

    <lightning:card title="Grand Parent Output">
 
    {!v.prntoutput}
    <br/>
    <br/>
    <br/>
    <c:parentComp  prntoutput="{!v.parentdata}" />
     
    </lightning:card>
</aura:component>

==================
Grantparent controller
==============

({
Grandparent : function(component, event, helper) {
     
        var output=parseInt(event.getParam("firstnumber")) +parseInt(event.getParam("secondnumber"));
   
       component.set("v.prntoutput",output);
     
     

}
})

Step 6:
=========
Alleventsapp
=======

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


For another advance way of communication on top of these topics, please refer here: https://davesfdc.blogspot.com/2018/10/another-advanced-way-of-parent-to-child.html

No comments:

Post a Comment