Hello friends, In this post you are going to learn about aura method as well as you will find a code example to implement aura method inside your lightning component, so let's get started.
Aura method in lightning component
Aura method (aura:method) work as a component's API. This helps you to directly call a method present in a component's client-side controller without using component event. Using aura:method we can call child component method directly from parent component. Let's understand it with simple code example.
Implementation:
For aura:method implementation we have to create two components. i.e. a) ChildComponent b) Parent Component.
ChildComponent.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">ChildComponentController.js
<aura:method name="SampleMethod" action="{!c.executeMethod}" access="public">
<aura:attribute name="param1" type="String" default="Aura Method"/>
<aura:attribute name="param2" type="String" default="Example"/>
</aura:method>
</aura:component>
({ParentComponent.cmp
executeMethod : function(component, event, helper) {
var params = event.getParam('arguments');
if (params) {
var param1 = params.param1;
var param2 = params.param2;
alert("Output : "+param1 + " " + param2);
}
}
})
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global" >ParentComponentController.js
<div class="slds-m-around_xx-large">
<c:ChildComponent aura:id="childCmp"/>
<lightning:button variant="brand" label="Execute Aura Method" onclick="{!c.executeAuraMethod}" />
</div>
</aura:component>
({
executeAuraMethod : function(component, event, helper) {
var childComponent = component.find("childCmp");
var message = childComponent.SampleMethod("hi!","I am alert box through Aura Method");
}
})
Output:
Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.
0 Comments
Post a Comment