How To Do Component Communication In LWC In Salesforce

Component Communication In LWC

In this article, we will understand component communication in LWC To make component dynamic and flexible communication between your lightning web component is required. Since we know that lwc component can be nested there are 3 possibilities for communication between components.

• Parent to child communication
• Child to parent communication
• Communication between two separate components.

Let start with 1st one.

Parent To Child Communication

A public property of any child can be accessed through parent components. Let’s understand all of this with an example.

Consider we have a component called parentEx which has a date input asking for your birthdate. Also inside this parentEx component we have another component called childEx component which shows a message about your birthday, whenever you select a birthdate in parentEx. Let’s start some coding –

parentEx.Html

<template>
    <lightning-card title='Parent Card'>
        <lightning-input type="date" name="input1" label="Select Your Birthdate" onchange={passBday}></lightning-input>
    </lightning-card>
    <lightning-card title='Parent call child'>
        <c-child-ex></c-child-ex>
    </lightning-card>
</template>

parentEx.js

import { LightningElement, api } from 'lwc';

export default class ParentEx extends LightningElement {
    passBday(event){
        console.log(event.target.value);
        this.template.querySelector('c-child-ex').handleBday(event.target.value);
    }
}

childEx.html

<template>

    <lightning-card title='Child Component'>
        {greetings}
    </lightning-card>
   
</template>

childEx.js

import { LightningElement, api, track } from 'lwc';

export default class ChildEx extends LightningElement {
    @track greetings;
    @api
    handleBday(bdayDate){
        this.greetings = 'Hey There Your Bday On ' + bdayDate;
    }
}

Also Read: How To Use Properties In Lightning Web Component?

Make the required changes in your meta file of component and add your component to your page and change the birthdate.
What we have done so far is first we have created a parentEx.html and write code for input and call child component in it. In childEx.html we have written the message that we want to display to the user.

Coming to the js part in childEx.js I have declared a property called greetings which is used in its component so it can be private and decorated with @track. In parentEx.html input field has a onchange callback and that is defined in its js file. Now I want to send the value of the input field to the child component. For this, I can only call public methods/ public properties of child component so we have declared a public method in childEx.js file decorated with @api as handleBday which is setting the message of the child component. In order to call this, we have used the querySelector method of js to fetch the child component first and then calls the method.

So points to note down for Parent to child communication is:

• The child must have public property decorated with @api
• To call the child method can use this.template.querySelector

For an understanding of other communication check our further blogs. Also, we as a salesforce consulting company have a large team of skilled salesforce developers who have assisted many clients by providing them salesforce development services.

Also Read: How To Embed Lightning Component In Flow?