# Child-Parent Component

# 🔗 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`

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

```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
<?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:

```plaintext
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.