How to pass input value from parent to child component through LMS method in Salesforce | Hand-on example as pass input value from parent to child component through Lightning Message Service (LMS) in Salesforce

Hand-on example as pass input value from parent to child component through Lightning Message Service (LMS) in Salesforce

In Salesforce Lightning Message Service (LMS), we normally use it for communication between unrelated components (not directly parent–child).

But for learning purpose, we can still create a simple example where:

Parent Component publishes a message
Child Component subscribes and receives the value

This example is very beginner-friendly and easy to understand.

Step 1: Create Message Channel

First, define a message channel in your Salesforce org.

In your project directory, create a folder named messageChannels under force-app/main/default.

Inside the messageChannels folder, create a new XML file named SendMessageChannel.messageChannel-meta.xml.

🎁 Up to 99% Off Courses (Coupon)
💥 Use Promo Code: STANDARDOFFER💥
🚀 Get Free Salesforce Course Access: www.thevijaykumar.w3web.net

Add the following code to the file and deploy it to your org:

```
 
```

  <?xml version="1.0" encoding="UTF-8"?>

<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">

    <masterLabel>SendMessageChannel</masterLabel>

```
    <isExposed>true</isExposed>
```

    <description>Pass DATA FROM Parent TO Child USING LMS</description>

```
 
```
```
    <lightningMessageFields>
```
```
        <fieldName>message</fieldName>
```

        <description>Message Text</description>

```
    </lightningMessageFields>
```
```
 
```
```
</LightningMessageChannel>
```

Step 2: Parent Component (Publisher)

This component will send input value using LMS.

parentComponent.html

```
   <template>
```

    <lightning-card title="Parent Component">

```
 
```
```
 
```

        <div class="slds-grid slds-wrap slds-p-around_medium">

            <div class="slds-col slds-size_6-of-12">

```
 
```

                <lightning-INPUT label="Enter Message" VALUE={inputValue} onchange={handleChange}> </lightning-input>

```
 
```
```
                <br/>
```
```
 
```

                <lightning-button label="Send to Child" onclick={sendMessage}></lightning-button>

```
 
```
```
            </div>
```
```
        </div>
```
```
 
```
```
    </lightning-card>
```
```
</template>
```

parentComponent.js

  import { LightningElement, wire } FROM 'lwc';

import { publish, MessageContext } FROM 'lightning/messageService';

import SEND_MESSAGE FROM '@salesforce/messageChannel/SendMessageChannel__c';

```
 
```

export DEFAULT class ParentComponent extends LightningElement {

```
 
```
```
    inputValue = '';
```
```
 
```
```
    @wire(MessageContext)
```
```
    messageContext;
```
```
 
```
```
    handleChange(event){
```

        this.inputValue = event.target.value;

```
    }
```
```
 
```
```
    sendMessage(){
```
```
 
```
```
        const payload = {
```
```
            message: this.inputValue
```
```
        };
```
```
 
```

        publish(this.messageContext, SEND_MESSAGE, payload);

```
    }
```
```
}
```

Step 3: Child Component (Subscriber)

This component receives the value from parent.

```
  <template>
```

    <lightning-card title="Child Component">

```
 
```
```
        <p STYLE="padding:10px">
```

            Received Message : {receivedMessage}

```
        </p>
```
```
 
```
```
    </lightning-card>
```
```
</template>
```

childComponent.js

  import { LightningElement, wire } FROM 'lwc';

import { subscribe, MessageContext } FROM 'lightning/messageService';

import SEND_MESSAGE FROM '@salesforce/messageChannel/SendMessageChannel__c';

```
 
```

export DEFAULT class ChildComponent extends LightningElement {

```
 
```
```
    receivedMessage = '';
```
```
 
```
```
    subscription = NULL;
```
```
 
```
```
    @wire(MessageContext)
```
```
    messageContext;
```
```
 
```
```
    connectedCallback(){
```
```
        this.subscribeMessage();
```
```
    }
```
```
 
```
```
    subscribeMessage(){
```
```
 
```
```
        IF(!this.subscription){
```
```
 
```

            this.subscription = subscribe(

```
                this.messageContext,
```
```
                SEND_MESSAGE,
```
```
                (message) => {
```

                    this.receivedMessage = message.message;

```
                }
```
```
            );
```
```
        }
```
```
    }
```
```
}
```

Step 4: Add Both Components in One Page

app.html

```
  <template>
```
```
 
```

    <c-parent-component></c-parent-component>

```
 
```
```
    <br/>
```
```
 
```

    <c-child-component></c-child-component>

```
 
```
```
</template>
```

app.js-meta.xml

  <?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

```
    <apiVersion>45.0</apiVersion>
```
```
    <isExposed>true</isExposed>
```
```
    <targets> 
```

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

```
    </targets>
```
```
</LightningComponentBundle>
```

FAQ (Frequently Asked Questions)

What is @api and @track in lwc?

Lightning Web Components (LWC) introduced a new programming model with decorators that enhance the functionality of properties and functions. Among these decorators, @api, @track, and @wire play crucial roles in creating powerful and interactive Lightning components.

How to pass ref from parent to child React functional component?

forwardRef() is a React utility function that allows ref values from a parent component to be availed to a child functional component. The ref s are first created using useRef() or createRef() inside the parent. They are then forwarded and picked to manipulate a DOM node rendered inside the child JSX.

Which decorator is used to pass data from a parent component to a child component?

The @Input decorator is used to pass data from a parent component to a child component. Here the @Input decorator was used to mark the name property as an input property. If the value of the name property changes in the parent component, then that change is going to get propagated via the @Input() decorator.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

What is @api and @track in lwc?

How to pass ref from parent to child React functional component?

Which decorator is used to pass data from a parent component to a child component?

Related Topics | You May Also Like

Vijay Kumar