Saturday, December 19, 2020

How to call lwc method from Aura component

 In this blog post we will learn "How to call lwc method from Aura component".


parentAuraComp.cmp


<aura:component>

<div>

    I am parent Aura Component.

</div>

<c:childLwcComp aura:id="childLwcCompId"></c:childLwcComp>

<lightning:button label="Call Child LWC Comp" variant="brand" onclick="{!c.callChildMethod}" ></lightning:button>

</aura:component>         

 


parentAuraCompController.js


({

 

    callChildMethod : function(component, event, helper) {

        var findChildComp=component.find('childLwcCompId');

        findChildComp.lwcCompMethodDescription('Hi I am Aura Component Message');

      }

})


childLwcComp.html


<template>

    <div>

        I am child LWC component.

    </div>

</template>


childLwcComp.js


import { LightningElement,api } from 'lwc';

 

export default class ChildLwcComp extends LightningElement {

    

    @api

    lwcCompMethodDescription(messageFromAura){

        alert('messageFromAura :'+ messageFromAura);

        

    }

 

}


auraAppForTesting.app


<aura:application>

<c:parentAuraComp></c:parentAuraComp>

</aura:application>          


Output:


How to call lwc method from Aura component

How to call lwc method from Aura component

TAGS: how to call lwc method from Aura component,call lwc from aura component,pass attribute from aura to lwc,aura to lwc communication,

No comments:

Post a Comment