Hello friends, today we are going to discuss How to call Aura component from LWC. We will fire the event from the LWC component and this event will catch in Lightning Aura Component. Pass value from child LWC to parent AURA component.
Also , check this : Invoke LWC from Aura Component
Key Highlights:
- Both components should be a parent-child relationship, which means the LWC component should be embedded in Aura Component.
- We will fire the event from the LWC component with parameters to call the Aura method.
- Here We will create a field and button so we can pass this field value to Aura Component by clicking this button and showing this field value in Lightning Component.
Code :
childLwc.HTML :
<template>
<lightning-card variant="Narrow" title="Child Component" icon-name="standard:contact">
<div class="slds-p-horizontal_small">
<div class="slds-p-around_medium lgc-bg">
<lightning-input type="text" label="Name" onchange={handleName} value={Name}></lightning-input>
</div>
<div class="slds-p-around_medium lgc-bg">
<lightning-input type="text" label="City" onchange={handleCity} value={City}></lightning-input>
</div>
<!-- call child method -->
<div class="slds-p-around_medium lgc-bg" style="text-align: end;">
<lightning-button variant="brand" label="Call Parent" title="Call Parent" onclick={callParent} class="slds-m-left_x-small"></lightning-button>
</div>
</div>
</lightning-card>
</template>
childLwc.JS :
import { LightningElement, api } from 'lwc';
export default class ChildLwc extends LightningElement {
Name;
City;
handleName(event){
this.Name = event.detail.value;
}
handleCity(event){
this.City = event.detail.value;
}
callParent(event){
let paramData = {Name:this.Name, City:this.City};//JSON.parse({Name:this.Name, City:this.City});
let ev = new CustomEvent('childmethod',
{detail : paramData}
);
this.dispatchEvent(ev);
}
}
ParentAuraComponent.cmp :
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global" >
<aura:attribute name="name" type="String"/>
<aura:attribute name="city" type="String"/>
<c:childLwc aura:id="childLwc" onchildmethod="{!c.handleClick}"></c:childLwc>
<lightning:card title="Parent Aura Component" class="slds-m-top_small">
<div class="slds-p-horizontal_small">
Name : {! v.name }<br/>
City : {! v.city }
</div>
</lightning:card>
</aura:component>
ParentAuraComponentController.JS :
({
handleClick : function (cmp, event, helper) {
var name = event.getParam('Name');
var city = event.getParam('City');
cmp.set("v.name", name);
cmp.set("v.city", city);
//fire toast message
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
"mode" : 'sticky',
"title" : "Success",
"message" : 'call from LWC component',
"type" : "success"
});
toastEvent.fire();
}
})
Output:
Reference:
What’s your Reaction?
+1
5
+1
1
+1
+1
+1
1
+1
Total views : 1113158