How to call method of child LWC from parent AURA component

 In this blog post we will learn "How to call method of child LWC from parent AUR component".

To call method of child LWC from parent Aura component we will need to decorate the

child LWC method with @api decorator, In AURA component we need to first assign aura id to child

LWC as highlighted in yellow color. Using component.find() we can get the child LWC and

 finally call its method as highlighted in AURA component JS file.

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,