How to call child component method from parent component in lightning web component

In this blog post, we will learn "How to call child component method from parent component in lightning web component".

childDemoComp.html

<template>

    <div>

        <p>

        Hi, I am from child component HTML file.

       </p>

        <p>

        <b>Message from parent comp is </b> : {messagefromparent}

       </p>

       <p>

        <b>Name of parent comp is </b>: {parentcompname}

       </p>

    </div>

</template>      

childDemoComp.js

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

export default class childDemoComp extends LightningElement {

    @track messagefromparent;

    @track parentcompname;

    @api childMethod(){

        this.messagefromparent='ParentCompMsg';

        this.parentcompname='ParentCompName';

    }

}

parentDemoComp.html

<template>

    <div>

        Hi, I am from parent component HTML file.

        <lightning-button variant="brand" label="CallChildCompMethod" onclick={handleButtonClick}>

        </lightning-button>

        <c-child-demo-comp></c-child-demo-comp>

    </div>

</template>

parentDemoComp.js

//* eslint-disable no-alert */

import { LightningElement } from 'lwc';

export default class parentDemoComp extends LightningElement {

  handleButtonClick(){

    this.template.querySelector("c-child-demo-comp").childMethod();

  }

}

testApp.app

<aura:application>

<c:parentDemoComp></c:parentDemoComp>

</aura:application>    

Hope you find this post on "How to call child component method from parent component in lightning web component" useful.