Child to Parent Communication in LWC with Practical Examples

If you are learning Lightning Web Components (LWC), understanding component communication is extremely important. Our previous post covered Parent to Child communication. In this blog we are going to explore about Child to Parent Communication in LWC.

In real-world salesforce projects, components rarely work alone. A child component often needs to send data back to its parent – and that’s where Child to Parent Communication comes into play.

In this blog, we will cover:

• How to achieve child to parent communication in LWC
• What is Event Bubbling?
• What is composed?
• Real-life examples

How to achieve Child to Parent Communication in LWC?

In LWC, child to parent communication happens using Custom Events. The process has 3 steps:

1. Create a custom event in the child.
2. Dispatch the event
3. Handle the event in the parent.

Syntax to Create Custom Event

new CustomEvent('eventName',{
  detail: null,
  bubbles: false,
  composed: false
})

We can create CustomEvent, using CustomEvent() constructor which has one required parameter of type string indicating event type.

• bubbles: A Boolean value indicating whether the event starts from child component and travels upward in DOM hierarchy or not. By default, value is false
• composed: A Boolean value indicating whether the event can cross the shadow DOM boundry. By default, value is false.
• detail: This property is used to send the data from child component to parent component. There is no restriction on type or structure of detail property but, best practice is to send the primitive data.

Syntax to Dispatch Custom Event

EventTarget.dispatchEvent(eventName)

To dispatch an event, call the EventTarget.dispatchEvent() method. In LWC EventTarget is this

Example: Child Sends Product Details to Parent

Scenario

We are passing product details from child component to parent component and displaying it on UI in parent component.

Child Component

Onclick of Select Product, we are passing hardcoded product details to parent component using CustomEvent. In the detail property, we are passing the copy of product object using spread operator because, in JS objects are passed by reference so, any listener can modify object details without child component’s knowledge.

<template>
    <div class="slds-box">
        <h3><b>Child Component</b></h3>
        </br>
        <lightning-button label="Select Product" onclick={handleSelect} varient="Brand"></lightning-button>
    </div>
</template>

import { LightningElement } from 'lwc';
export default class ChildProductSelect extends LightningElement {
    product = {
        productName: 'iPhone 15', 
        price: 1200
    };
    handleSelect() {
        const event = new CustomEvent('productselect', {
            detail: { ...this.product }
        });
        
        this.dispatchEvent(event);
    }
}

Parent Component

Child component dispatches a CustomEvent named productselect. Parent component listens to the event using onproductselect.

<template>
    <lightning-card title="Product Select">
        <div class="slds-p-around_medium slds-box">
            <c-child-product-select onproductselect={handleProductSelect}></c-child-product-select>
            <p><b>Selected Product:</b> {productName}</p>
            <p><b>Total Price:</b> {price}</p>
        </div>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';
export default class ParentProductSelect extends LightningElement {
    productName;
    price;

    handleProductSelect(event) {
        this.productName = event.detail.productName;
        this.price = event.detail.price;
    }

}

What is Event Bubbling in Child to Parent Communication in LWC ?

Event bubbling is a type of event propagation in which event travel upwards in DOM hierarchy. Event is first captured by innermost element and then propagated towards outermost elements.

Child Component

<template>
    <div class="slds-box" onclick={showChildNotification}>
        <h3><b>Child Component</b></h3>
        </br>
        <template lwc:if={displayChildNotification}>
            <p>Sending Product Details from Child to Parent</p>
        </template>
        </br>
        <lightning-button label="Select Product" onclick={handleSelect} varient="Brand"></lightning-button>
    </div>
</template>

import { LightningElement } from 'lwc';
export default class ChildProductSelect extends LightningElement {
    product = {
        productName: 'iPhone 15', 
        price: 1200
    };
    displayChildNotification = false;
    handleSelect() {
        const event = new CustomEvent('productselect', {
            detail: { ...this.product },
            bubbles: true
        });
        
        this.dispatchEvent(event);
    };
    showChildNotification(){
        this.displayChildNotification = true;
    }
}

Parent Component

<template>
    <lightning-card title="Product Select">
        <div class="slds-p-around_medium slds-box" onproductselect={handleProductSelect}>
            <p>Receiving Product Details from Child....</p>
            <template lwc:if={showProductDetails}>
                <p><b>Selected Product:</b> {productName}</p>
                <p><b>Total Price:</b> {price}</p>
            </template>
            <br/>
            <c-child-product-select></c-child-product-select>
        </div>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';
export default class ParentProductSelect extends LightningElement {
    productName;
    price;
    showProductDetails;

    handleProductSelect(event) {
        this.showProductDetails = true;
        this.productName = event.detail.productName;
        this.price = event.detail.price;
    }
}

Explanation

• Child component has button “Select Product” which will call handler function handleSelect.
• handleSelect will create and dispatch the CustomEvent
• Once “Select Product” button is clicked. Event will start propagating upwards
• First it will execute onclick handler from div element which is a wrapper of “Select Product” button.
• Then event will reach up to parent component and onproductselect event handler will execute.

Child to Parent Communication in LWC is simple once you understand Custom events, Event bubbling, Shadow DOM and composed property. In real Salesforce projects, this concept is used for Form submissions, Modal close actions, Record updates etc. Master this and you level up your LWC development skills significantly.