DEV Community

Sabir Sheikh
Sabir Sheikh

Posted on

🔗 Parent to Child Communication in LWC Without Message Channels

#salesforce #lwc

In Lightning Web Components (LWC), when your child component is nested inside the parent, you can easily pass data using @api decorated properties. This is the simplest and most direct way to enable communication from parent to child — no need to use Lightning Message Service or Custom Events.

🎯 Use Case
We want to:

  • Create a parent component with a textbox.
  • As the user types into the textbox, the child component should receive and display the text in real time.
  • The child component is embedded inside the parent.

📐 Final Output
🔹 As you type something in the parent input field, it updates the child display area instantly.

🏗 Folder Structure

lwc/
├── parentComponent/
│   ├── parentComponent.html
│   ├── parentComponent.js
│   └── parentComponent.js-meta.xml
└── childComponent/
    ├── childComponent.html
    ├── childComponent.js
    └── childComponent.js-meta.xml
Enter fullscreen mode Exit fullscreen mode

👨‍👦 Parent-to-Child Communication
✅ childComponent
📄 childComponent.html

<template>
    <lightning-card title="Child Component">
        <p class="slds-p-around_medium">
            Text from Parent: <strong>{textFromParent}</strong>
        </p>
    </lightning-card>
</template>
Enter fullscreen mode Exit fullscreen mode

📄 childComponent.js

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api textFromParent = '';
}
Enter fullscreen mode Exit fullscreen mode

📄 childComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
      <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
Enter fullscreen mode Exit fullscreen mode

✅ parentComponent
📄 parentComponent.html

<template>
    <lightning-card title="Parent Component">
        <lightning-input 
            label="Enter Text" 
            value={textInput} 
            onchange={handleChange}>
        </lightning-input>

        <c-child-component text-from-parent={textInput}></c-child-component>
    </lightning-card>
</template>
Enter fullscreen mode Exit fullscreen mode

📄 parentComponent.js

import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    textInput = '';

    handleChange(event) {
        this.textInput = event.target.value;
    }
}
Enter fullscreen mode Exit fullscreen mode

📄 parentComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>
Enter fullscreen mode Exit fullscreen mode

💡 Explanation

  • The parent component owns the state (textInput).
  • It listens for changes via onchange.
  • It passes the data to the child component through the attribute text-from-parent.
  • The child receives that value via a public property decorated with @api.

🧠 Key Takeaways

  • Use @api in the child to create a public property.
  • Use the property in parent HTML like a normal attribute.
  • Ideal when your components are nested and related.

📌 When to Use This Pattern
| **Scenario** | **Solution** |
| ------------------------------------------------ | ----------------------------- |
| Parent and child are directly connected (nested) | Use@apiproperty |
| Components are unrelated or not nested | Use Lightning Message Service |
| Child wants to notify Parent | Use Custom Events |

Top comments (0)

OSZAR »