Calling Method of Child Component from Parent in LWC

In order to call methods of Child Component from Parent Component in LWC (Lightning Web Components), we need to perform the following steps:

1. Declare method of Child Component as a public method with @api annotation.
2. Get the instance of Child Component in Parent Component JS using querySelector().
3. Call the method of Child Component using the instance created above and pass the required parameters if necessary.

For the simple demonstration, let’s say, we have a Parent Component which shows the Account Details, and a Child Component which shows the List of Contacts for the Account. From the Parent Component, we can create a Contact that will be added in the list of Contact in the Child Component.

Implementation

Parent Component parentCmp will have a Child Component childCmp. The Parent Component will display the Account Name as part of the Title. The parent Component also has a Text box to type Contact Name and Button to create Contact.

parentCmp.html

<template>
        
    <lightning-card  title="Niks Developer Account Details">
        <div class="slds-m-bottom_x-large">
    
            <!-- Input for Contact Name -->
            <div class="slds-p-around_medium">
                <lightning-input type="text" label="Contact Name" placeholder="Enter contact name..." value={strContactName} onchange={changeName}></lightning-input>
            </div>
    
            <!-- Button to add contact -->
            <lightning-button variant="brand" label="Add Contact" title="Add Contact" onclick={addContact} class="slds-p-around_medium"></lightning-button>
            <!-- Child Component to display list of Contacts-->
            <div class="slds-m-top_x-medium slds-p-around_medium">
                <c-child-cmp></c-child-cmp>
            </div>
        
        </div>
    </lightning-card>
</template>

The Text box will capture the Contact Name from the User and it also has onchange handler. changeName() will be executed to get the Contact Name every time it is updated. Once the button is clicked, addContact() will be called which will get the instance of Child Component and call the addContactToList() of the child component. The name of Contact will be passed as a parameter.

parentCmp.js

import { LightningElement } from 'lwc';
export default class ParentCmp extends LightningElement {
    strContactName = '';
    
    // To call the child component method to add the Contact into the list.
    addContact(event){
        const objChild = this.template.querySelector('c-child-cmp');
        objChild.addContactToList(this.strContactName);
    }
    // To update the Contact name after updating it on UI. 
    changeName(event){
        this.strContactName = event.target.value;
    }
}

Child Component has the default list of Contacts assigned in the Controller. It will loop through contacts using for:each loop to display the contacts.

childCmp.html

<template>
    <h1 class="slds-text-heading_small">List of Contacts</h1>
    <div class="slds-p-around_medium">
        <!--For each loop to display Contact from the list.-->
        <template for:each={lstContacts} for:item="contact">
            <p key={contact}>{contact}</p>
        </template>
    </div>
    
</template>

The public method of Child Component addContactToList() has parameter strContactName that will have the name of Contact passed from Parent Component. Once strContactName is added to the current list of contacts, it will reflect on the UI.

import { LightningElement, track, api } from 'lwc';
export default class ChildCmp extends LightningElement {
    // Default list of Contacts.
    @track lstContacts = ["Weird Coder", "Red Devil", "Mystic Baba", "OneManArmy Baburao"];
    
    // This method will add new Contact into Contact list.
    @api
    addContactToList(strContactName){
        this.lstContacts.push(strContactName);
    }
    
}

Calling Method of Child Component from Parent

The output for above implementation will look like below:

If you want to know more about the Calling Method of Child Component from Parent, you can check the official Salesforce developer guide here.

In case you don’t want to miss future posts, please Subscribe here.

Thanks !