Child to Parent communication in LWC

Let's start by creating two components

• Parent Component: parentAccountLwc

• Child Component: childAccountLwc

---

The Parent Component will display the Account Name communicated by the Child Component which will have a picklist of contacts.

On selecting any contact from the dropdown the Account linked with the same contact will be displayed on the parent component

Now let's jump on to the code:

parentAccountLwc

HTML

<template>
    <lightning-card  variant="Narrow"  title="Account" icon-name="standard:account">
        <b>Parent Account Component</b>
        <p>The Parent Account of the Selected child is : {accountName}</p>
        <c-child-Account-Lwc
            onshowaccount = {showAccount}
        ></c-child-Account-Lwc> 
    </lightning-card>
</template>

Explanation: A dynamic variable accountName will display the name of the account when a contact is selected from the child component which we are calling in the above parent component.

JS

import { LightningElement } from 'lwc';
import getAccountName from '@salesforce/apex/ComponentCommunicationHelper.getAccountName'
export default class ParentAccountLWC extends LightningElement {
    accountName;
    showAccount(event)
    {
        const AccountId = event.detail;
        getAccountName({accId:AccountId}).then(result=>{
            this.accountName = result;
            this.error = null;
            console.log('OUTPUT : Account Name',this.accountName);
        }).catch(error=>{
            this.error = error;
            this.accountName = null;
            console.log('OUTPUT : Error',error);

        })
    }
}

Explanation: we are calling an imperative apex method to get the Account Name and then assigning it to the dynamic variable {accountName}, also the accountId is being passed from the child component which we will discuss in the below code

childAccountLwc

HTML

<template>
    <lightning-card  variant="Narrow"  title="Contact" icon-name="standard:contact">
    <b>Child Contact Component</b>
        <lightning-combobox
            name="contact"
            label="All Contacts"
            value={value}
            placeholder="Select a Contact"
            options={options}
            onchange={handleChange} ></lightning-combobox>
    </lightning-card>
</template>

Explanation: we are having a lightning combo-box where we will populate all the contacts and on selecting any contact the related AccountId field which stores the parent Account Id of the Account will be passed from Child to Parent and thus the two components can communicate

JS

import { LightningElement, wire } from 'lwc';
import getAllContacts from '@salesforce/apex/ComponentCommunicationHelper.getAllContact';
export default class ChildAccountLwc extends LightningElement {
    value = '';
    //allContacts;
    allContactsArr = [];
    error;
    get options()
    {   
        return this.allContactsArr;
    }
    @wire(getAllContacts)
    allContacts({error,data})
    {
        console.log('OUTPUT : WIRE CALLED');
        if(data)
        {
            //this.allContacts = data;
            let tempArr = [];
            for(let i=0;i<data.length;i++)
            {
                tempArr.push({label: data[i].Name , value : data[i].AccountId});
            }
            this.allContactsArr = tempArr;
            this.error = null;
            console.log('OUTPUT : Contacts',this.allContactsArr);
        }
        if(error)
        {
            this.error = error;
            this.allContacts = null;
            console.log('OUTPUT : error',this.error);
        }
    }

    handleChange(event)
    {
        this.value = event.detail.value;
        const accId = this.value;
        console.log('OUTPUT : Selected contact Id ',this.value);
        this.dispatchEvent(new CustomEvent('showaccount', {detail : accId}));

    }
}

Explanation: We are having one wire method where we will be calling all the contact records and storing them in an array of objects the same will be passed onto the combo box. We have an on-change handler that will create a custom event and dispatch the same. This custom event is finally handled in the parent component and note that we are sending AccountId from child to parent.

In the above image, we can see that on selecting a contact Rose Gonzalez the related account is displayed Edge Communications

On selecting Pat Stumuller, related account Pyramid Construction Inc is displayed