Friday, November 27, 2020

Fan Switch Example | Understanding Communication between Lightning components

In this article we are going to see a simple FAN switch on/off example. Concept used here are:

1) Parent to child communication using Aura Method

2) Using Static Resource in lightning component 





ChildFan.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global"> <aura:method name="imageMethod" action="{!c.doAction}" > <aura:attribute name="imageinfo" type="Boolean" default="false"/> </aura:method> <aura:attribute name="fantype" type="Boolean" default="false"/> <div class="slds-align_absolute-center"> <aura:if isTrue="{!v.fantype}"> <img style="border: 8px solid black;" src="{!$Resource.FanOn}"/> <aura:set attribute="else"> <img src="{!$Resource.FanOff}"/> </aura:set> </aura:if> </div> </aura:component>


ChildFan.js

({ doAction : function(component, event, helper) { var params = event.getParam('arguments'); if (params) { var param1 = params.imageinfo; component.set("v.fantype",param1); } } })


ParentFan.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" > <div class="slds-align_absolute-center"> <button class="buttonclass1" onclick="{!c.FanOn}">ON</button> <c:childFan aura:id="childFan"></c:childFan> <button class="buttonclass2" onclick="{!c.FanOff}">OFF</button> </div> </aura:component>



ParentFan.js

({ FanOn : function(component, event, helper) { var childFanComp = component.find('childFan'); childFanComp.imageMethod("true"); }, FanOff : function(component, event, helper) { var childFanComp = component.find('childFan'); childFanComp.imageMethod("false"); } })

Thank you..!!

No comments:

Post a Comment

Fan Switch Example | Understanding Communication between Lightning components

In this article we are going to see a simple FAN switch on/off example. Concept used here are: 1) Parent to child communication using Aura M...