How to invoke/call child lightning web component function from parent lightning web component

Call child LWC component function from parent LWC function

In this post we will see how to fire or invoke function which is in child component when some event occurred on parent component in lwc.

In our project requirements we may get a situation to call Child Lightning web component function from corresponding parent Lwc component when some event occurs like button click.
If we want to call child component function then

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

Check below example, On parent component we have button called "Click Me", once that button clicked, "Parent function Invoked" 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>  

parentLwc.js

 import { LightningElement } from 'lwc';  
 export default class ParentLwc extends LightningElement {  
  onButtonClick(){  
    console.log("Parent LWC component function invoked")  
   this.template.querySelector("c-child-lwc").childFunction();  
  }  
 }  

parentLwc.html

 <template>  
   <div class="slds-box">  
     <p>Parent LWC componenet</p>  
     <lightning-button variant="brand"   
     label="Click Me"  
     onclick={onButtonClick} class="slds-m-left_x-small"></lightning-button>  
   </div>  
   <c-child-lwc></c-child-lwc>  
 </template>  

Output:

Once we click on "Click Me" Button, Checkbox on child will be checked automatically.


On console:

Related Posts: Invoke child lwc component function from Parent lightning component function.

Subjects:

Lightning Web Components LWC LWC Component examples

Share This: