fire a child Lightning Web Component method from Parent LWC

In last two blogs, We have learnt to communicate and pass data between parent to child and child to parent Lightning Web Component. This time we are going to learn to call methods on child components from parent Lightning Web Component.

Scenario

There are two components:- parentWebComponent and childWebComponent. The child component has been called in parent component. The parent also have a button which fires an method defined in child component.

Before going for Code, You should know these things:-

To expose a public method, decorate it with @api.
Public methods are part of a component’s API.
To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components.

childWebComponent.html

We just have an property shown with some static text in html markup. The property is defined in js file and it is reactive. Hence it will be re-render when the value gets changed.

<template>
  The Value is : {value}
</template>

childWebComponent.js

We have a public method defined which can be called from owner or parent component.

import { LightningElement, track,api } from "lwc";

export default class ChildWebComponent extends LightningElement {
  @track value=100; //reactive in nature 
  //public method
  @api handleValueChange() {
    this.value=200;
  }
}

childWebComponent.js-meta.xml

We are not exposing this to any page type as it will be called in parent web component.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="childWebComponent">
    <apiVersion>46.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

parentWebComponent.html

It consist of child component and a button with onclick handler which will call the method defined in child component.

<template>
  <!--calling child web component here-->
  <c-child-web-component></c-child-web-component>
  <lightning-button variant="brand" label="Submit" onclick={handleClick}>
  </lightning-button>
</template>

parentWebComponent.js

The onclick handler will call the child component method by using querySelector.

import { LightningElement } from "lwc";

export default class ParentWebComponent extends LightningElement {
  handleClick() {
    //firing an child method
    this.template.querySelector("c-child-web-component").handleValueChange();
  }
}

parentWebComponent.js-meta.xml

This file defines where you can use the component in Salesforce. Here, we have exposed it to record, App page and home page.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="ParentWebComponent">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>