How to fire child LWC component function from Parent Aura Component

Fire child lwc component function from Aura component function:

In this post we will learn how to fire or call function which is in child lwc component when some event occurred on parent lightning aura component.


If we want to call child lwc component function then

• Child LWC component function should be public (decorated with @api). 
• On parent aura function we need to get child component by using aura:id  and then we can invoke child function (We should give same function name defined in child lwc). 

Check below example code, On parent aura component we have lightning button called "Click Me", once we click on button, "Parent aura function Invoked" and  checkbox on child component will be checked which is unchecked by default.

childLwc.js

 import { LightningElement, track, api } from 'lwc';  
 export default class ChildLwc extends LightningElement {  
   @track checkBoxChecked = false;  
   @api childFunction(){  
    console.log("Child LWC Component method invoked");  
    this.checkBoxChecked = true;  
  }  
 }  

childLwc.html

 <template>  
   <div class="slds-box">  
     <p>I am from Child LWC Component</p><br/>  
     <lightning-input type="checkbox" label="Parent function Invoked"   
      checked={checkBoxChecked} name="input1"></lightning-input>  
   </div>  
 </template>  

LwcInAuraCmp.cmp

 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,  
               flexipage:availableForRecordHome,  
               force:hasRecordId,force:lightningQuickAction" access="global" >  
  <div class="slds-box">  
     <p>This is parent lightning component</p>  
     <lightning:button variant="brand" label="Click Me" onclick="{! c.handleClick }" />  
   </div>  
   <c:childLwc aura:id="childLwc"></c:childLwc>  
 </aura:component>  

LwcInAuraCmpController.js

 ({  
  handleClick : function(component, event, helper) {  
     console.log("Parent aura component method invoked");  
     component.find('childLwc').childFunction();   
  }  
 })  

TestApp

 <aura:application extends="force:slds">  
   <c:LwcInAuraCmp/>  
 </aura:application>  

Output:

Once we click "Click Me" button, checkbox on child lwc component will be checked automatically.

On Console:

Related Posts: Fire child LWC component function from parent LWC function

Subjects:

Lightning Web Components LWC LWC Component examples

Share This: