Invoking Child Component Function from Parent Component in LWC

In this blog post, we will walk through the process of invoking methods defined in a child component from its parent component in Salesforce Lightning Web Components (LWC). This involves defining methods in the child component using the @api decorator and then calling these methods from the parent component.

Step 1: Define a Method in Child Component with @api Decorator

First, you need to define a method in the child component and annotate it with the @api decorator. This makes the method public and allows it to be called from the parent component.

@api () {
    // Business Logic
}

@api (parameters) {
    // Business Logic with Parameters
}
        

Step 2: Invoking the Child Component Method from Parent Component

Follow these steps to call the child component method from the parent component:

1. Query Component Details Using querySelector() Method

Use the querySelector() method to get the child component details.

var  = this.template.querySelector('c-child-component');
        

2. Invoke the Method from Parent Component

.();
        

3. If the Child Component Method Contains Parameters

var  = {'Param1', 'Param2', 'param'};
.();
        

Example

Let's define two LWC components: cmp1 (Child) named delhi and cmp2 (Parent) named india.

Child Component: delhi

HTML Code:

<template>
    <lightning-card title='Invoking Child function from Parent' icon-name="standard:contact">
        <div class='slds-p-around_medium'>
            <strong> Child Component Value : {childproperty}</strong>
        </div>
    </lightning-card>
</template>
        

JavaScript Code:

import { LightningElement, api } from 'lwc';

export default class Delhi extends LightningElement {
    @api childproperty = 'Delhi is a Capital Of India';

    // Method without Parameter
    @api showcustommessage() {
        alert('This Method Is fired from Parent Component');
    }

    // Method with Parameter
    @api showparameterdetails(customerNameparam) {
        alert('Customer Parameter Name Is ==> ' + customerNameparam.firstname + ' ' + customerNameparam.lasttname);
    }
}
        

Parent Component: india

HTML Code:

<template>
    <lightning-card title='Parent Component' icon-name="standard:account">
        <div class='slds-p-around_medium slds-box'>
            <c-delhi childproperty={parentcomponentvalue}></c-delhi>
        </div>
        <h1> This Button Are in Parent Component</h1>
        <div class='slds-p-around_medium'>
            <lightning-button label="Set New Value" variant="brand" onclick={handleOnclick}></lightning-button>
        </div>
        <div class='slds-p-around_medium'>
            <lightning-button label="Show Custom Message" variant="brand" onclick={callcustomMethod}></lightning-button>
        </div>
        <div class='slds-p-around_medium'>
            <lightning-button label="Show Customer Details" variant="brand" onclick={callcustomerMethod}></lightning-button>
        </div>
    </lightning-card>
</template>
        

JavaScript Code:

import { LightningElement } from 'lwc';

export default class India extends LightningElement {
    parentcomponentvalue = 'Value Has been Added from parent Javascript';

    handleOnclick() {
        this.parentcomponentvalue = 'Value Is assigned Via a Button click';
    }

    callcustomMethod() {
        var invokemethodwithoutparam = this.template.querySelector('c-delhi'); // to get the details of child cmp
        invokemethodwithoutparam.showcustommessage(); // invoking 1st method of child cmp
    }

    callcustomerMethod() {
        var invokemethodwithparam = this.template.querySelector('c-delhi'); // to get the details of child cmp
        var param = { 'firstname': 'Sharuk', 'lasttname': 'Khan' };
        invokemethodwithparam.showparameterdetails(param);
    }
}
        

Configuration File:

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