Lightning Web Component

Parent and Child Communication LWC

In a Lightning Web Component sometimes you have to communicate two components to share data or handle different events across them.

We'll show you two different scenarios in how to communicate two components in a Parent to Child relationship.

Lightning Web Component Parent Child communication

Communication from Parent to Child

To call a Child Component from a Parent Component, we'll use the concept of nested components. By nesting the child component within the parent component's markup, we establish a relationship that allows us to invoke methods and access properties from the child component. Here's is a LWC component example:

Parent Component

In this case we will have a Parent Component called ParentLWC

<!-- ParentLWC.html -->
<template>
    <div style="background-color: white; font-size: 1.5rem; border: 2px solid black">
        <h1>Parent Component</h1>
        <!-- YOU CANNOT USE UPPERCASE DECLARING THE CHILD COMPONENT -->
        <c-child-l-w-c 
            accountname={accountName}
        ></c-child-l-w-c>
    </div>
</template>

Make sure to use - before every mayus character from the Child LWC and do not forget about -c at the start of the Child LWC

// ParentLWC.js
import { LightningElement } from 'lwc';

export default class ParentLWC extends LightningElement {
    accountName = 'Jhon Doe';

}

Child Component

Our Child Component will be called ChildLWC.

<!-- ChildLWC.html -->
<template>
    <h1>Child Component</h1>
    <span style="font-size: 1.3rem; color: blue">{accountname}</span>
</template>
// ChildLWC.js
import { LightningElement, api } from 'lwc';

export default class ChildLWC extends LightningElement {
    // USE @api DECORATOR TO RECEIVE THE DATA FROM THE PARENT 
    @api accountname;

}

This is the result of our component, as you can see, the variable accountName was sent from the Parent to the Child using @api decorator.

Lightning Web Component communication between parent to child

Imperative Communication

To create a communication from Parent to Child LWC in a imperative way, meaning that you can send the data wherever you want in the process, for example on a click of a button, you can utilize @api decorator in the child component using a function. Here's how you can achieve it:

Parent Component

In this case we will create a Parent Component which will be in charge to send a counter to the Child Component and update it every time the user clicks on a button.

<!-- ParentLWC.html -->
<template>
    <div style="background-color: white; font-size: 1.5rem; border: 2px solid black">
        <h1>Parent Component</h1>
        <lightning-button onclick={handleSendData} label="Increase Counter"></lightning-button>
        
        <c-child-l-w-c 
        ></c-child-l-w-c>
    </div>
</template>

In the Javascript of the Parent make sure to select the Child component(from the HTML) that you're looking for on the querySelector method.

// ParentLWC.js
import { LightningElement } from 'lwc';

export default class ParentLWC extends LightningElement {
    counter = 0;
    
    handleSendData(){
        // SEND DATA TO THE CHILD
        this.template.querySelector('c-child-l-w-c').handleRecieveData(this.counter + 1);
        this.counter++;
    }
}

Child Component

On the Child we're going to show the counter that we're receiving from the Parent.

<!-- ChildLWC.html -->
<template>
    <h1>Child Component</h1>
    <p style="font-size: 1.2rem;">Counter from Parent: <span style="color: blue">{counter}</span></p>
</template>

You need to declare a function and you can perform any logic there with the data that you receive from the Parent.

// ChildLWC.js
import { LightningElement, api } from 'lwc';

export default class ChildLWC extends LightningElement {
    counter = 0;
    
    @api handleRecieveData(data){
        this.counter = data;
    };
}

This is how the component looks like, we sent a property from the Parent when the user clicks on a button to display it on the Child.

Lightning Web Component communication between parent to child with an event such as button click

Communication from Child to Parent

Custom events provide a straightforward and effective way to communicate from child to Parent components. By dispatching a custom event from the Child component, we can send data along with the event, and the parent component can listen for and handle the event to access the transmitted data.

Child Component

Declare a button on the Child which will send the counter to the Parent once the user clicks on it.

<!-- ChildLWC.html -->
<template>
    <h1>Child Component</h1>
    <lightning-button label="Increase Counter" onclick={sendDataToParent}></lightning-button>
</template>

On the CustomEvent you need to use two parameters: In the first one is the name of the variable that you will use then on the Parent to receive the property, and the other one is the data that you will send.

// ChildLWC.js
import { LightningElement } from 'lwc';

export default class ChildLWC extends LightningElement {
    counter = 0;

    sendDataToParent() {
        const customEvent = new CustomEvent('counter', { detail: this.counter + 1});
        this.dispatchEvent(customEvent);

        this.counter++;
    }
}
Make sure to use the detail key when you send the data, you can not use another keyword because it will not properly.

Parent Component

On the Parent LWC you must use the on keyword before the variable name to listen the event from the Child LWC.

<!-- ParentLWC.html -->
<template>
    <div style="background-color: white; font-size: 1.5rem; border: 2px solid black">
        <h1>Parent Component</h1>
        <p>Counter from Child: <span style="color: blue">{counter}</span></p>
        <c-child-l-w-c oncounter={handleIncreaseCounter}></c-child-l-w-c>
    </div> 
</template>

Here on the Javascript we'll send the counter property on the Custom Event so the Parent can use it.

// ParentLWC.js
import { LightningElement } from 'lwc';

export default class ParentLWC extends LightningElement {
    counter = 0;
    
    handleIncreaseCounter(event){
        this.counter = event.detail;
    }
}
Lightning Web Component communication between child to parent with an event such as button click