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:

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