🔗 Calling a Child LWC Component from a Parent Component

Lightning Web Components (LWC) support a powerful and modular architecture, where components can be nested and reused. One of the fundamental aspects of component-based development is the ability of a parent component to include and interact with a child component.

In this tutorial, we’ll walk through a basic example demonstrating how to call a child component from a parent component using simple LWC structure.

---

🧭 Scenario Overview

We have two components:

• A Parent Component called mainContainer

• A Child Component called greetingBox

The goal is to include the child component inside the parent component's template, which allows code reusability and clear separation of logic.

---

🧩 Step 1: Define the Child Component (greetingBox)

The child component is responsible for displaying a message. This is the simplest form of component composition.

🔸 File: greetingBox.html

<template>
    <lightning-card>
        Hello World from Child Component
    </lightning-card>
</template>

✅ This component is self-contained and doesn’t require any logic for now, as its purpose is only to display content.

---

🏗️ Step 2: Define the Parent Component (mainContainer)

This is where we use the child component by referencing its tag inside the parent’s template.

🔹 File: mainContainer.html

<template>
    <lightning-card>
        Hello World from Parent Component

        <!-- Child component is referenced here -->
        <c-greeting-box></c-greeting-box>
    </lightning-card>
</template>

🔧 Notice how we use <c-greeting-box> to call the child component. The tag always follows the format <c-childcomponentname> where "c" is the default namespace and "greeting-box" is the kebab-case version of the component folder name.

---

🛠️ Step 3: Expose the Parent Component to the Lightning App Builder

For the component to be usable on App, Record, or Home pages, you need to configure the mainContainer.js-meta.xml.

📄 File: mainContainer.js-meta.xml

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

⚙️ This configuration ensures that your parent component (which now includes the child) can be added to various Lightning pages through the Lightning App Builder.

---

✅ Result

When the mainContainer component is placed on a Lightning page:

Hello World from Parent Component
Hello World from Child Component

Both messages will appear—first from the parent, then from the nested child—as part of a single rendered output.

---

🎓

Calling a child component from a parent in LWC is simple, intuitive, and foundational for building scalable Salesforce applications. Here’s what we covered:

• How to create a reusable child component.

• How to include the child component using a custom tag in the parent’s template.

• How to expose the parent component to Lightning Experience using meta configuration.

This pattern not only promotes code reusability but also helps in maintaining a clear separation of concerns between components.