Call LWC Method from Aura component on Button Click

Call LWC Method from Aura component on Button Click

In this Blog Post, we will Call LWC component Method From Aura Component on a Button Click.

Please follow the below Code for creating your own Method.

Lightning Component Code

Component Code

---------------

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

    <lightning:card>

        <strong>

            I am Parent Component In Lightning Aura

        </strong>

    </lightning:card><br/>

    <div>

        <lightning:button label="Call Lightning Web Component"

                          variant="brand"

                          onclick="{!c.callChilLWCdMethod}"/>

    </div>

   

    <c:kS_ChildLWC aura:id = "mylwccmp"></c:kS_ChildLWC>

   

</aura:component>

-------------------------------------------------------------------------------------

JavaScript Coode

-----------------

({

    callChilLWCdMethod : function(component, event, helper) {

       

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

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

    }

})

LWC Component Code

LWC TEMPLETE CODE

------------------

<template>

    <div>

        I am LWC Component

    </div>

</template>

LWC COntroller CODE

-------------------

import { LightningElement,api } from 'lwc';

    export default class KS_ChildLWC extends LightningElement {

        @api

        lwcCompMethodDescription(messageFromAura){

        alert('messageFromAura :'+ messageFromAura);

    }

}

Like our post & bookmark this blog for your future learning. Any suggestions and improvements are most welcome, please comment your suggestions and improvement in the comment box.                                                 

😇Happy Coding Sharing Is Caring😇