🔗 Parent to Child Communication in LWC Without Message Channels

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

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

Text from Parent: {textFromParent}

📄 childComponent.js

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api textFromParent = '';
}

📄 childComponent.js-meta.xml

59.0
      true
    
        lightning__AppPage
        lightning__RecordPage
        lightning__HomePage

✅ parentComponent
📄 parentComponent.html

📄 parentComponent.js

import { LightningElement } from 'lwc';

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

    handleChange(event) {
        this.textInput = event.target.value;
    }
}

📄 parentComponent.js-meta.xml

59.0
    true
    
        lightning__AppPage
        lightning__HomePage
        lightning__RecordPage

💡 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 |