Project: Components That Talk to Each Other

Three components working together:

• contactManager — the parent, holding the list of contacts and the currently selected one.
• contactList — a child that receives the full contact array via @api and dispatches a select event when a row is clicked.
• contactDetail — a child that receives the selected contact via @api and displays it.

import { LightningElement, api } from 'lwc';

export default class ContactList extends LightningElement {
    @api contacts;

    handleRowClick(event) {
        const selectedId = event.currentTarget.dataset.id;
        this.dispatchEvent(new CustomEvent('select', { detail: selectedId }));
    }
}

<template>
    <template for:each={contacts} for:item="contact">
        <p key={contact.Id} data-id={contact.Id} onclick={handleRowClick}>
            {contact.Name}
        </p>
    </template>
</template>

import { LightningElement, api } from 'lwc';

export default class ContactDetail extends LightningElement {
    @api contact;
}

<template>
    <template if:true={contact}>
        <p>{contact.Name}</p>
        <p>{contact.Email}</p>
    </template>
    <template if:false={contact}>
        <p>Select a contact to see details.</p>
    </template>
</template>

import { LightningElement } from 'lwc';

export default class ContactManager extends LightningElement {
    contacts = [
        { Id: '1', Name: 'Ada Lovelace', Email: 'ada@example.com' },
        { Id: '2', Name: 'Grace Hopper', Email: 'grace@example.com' },
    ];
    selectedContact;

    handleSelect(event) {
        const selectedId = event.detail;
        this.selectedContact = this.contacts.find(c => c.Id === selectedId);
    }
}

<template>
    <c-contact-list contacts={contacts} onselect={handleSelect}></c-contact-list>
    <c-contact-detail contact={selectedContact}></c-contact-detail>
</template>

Data flows down from the parent to contactList via @api contacts, a click fires a select CustomEvent back up, the parent finds the matching record and passes it down to contactDetail — the complete loop this whole module has been building toward.