Project: Contact Management Application

A parent accountDetail component passing its recordId down to a child contactList component (Module 5's @api pattern), which lists, creates, deletes, and navigates to Contacts scoped to that Account.

// contactList.js
import { LightningElement, api, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { createRecord, deleteRecord } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';
import getContactsForAccount from '@salesforce/apex/ContactController.getContactsForAccount';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import LAST_NAME_FIELD from '@salesforce/schema/Contact.LastName';
import ACCOUNT_FIELD from '@salesforce/schema/Contact.AccountId';

export default class ContactList extends NavigationMixin(LightningElement) {
    @api accountId;
    wiredContactsResult;

    @wire(getContactsForAccount, { accountId: '$accountId' })
    wiredContacts(result) {
        this.wiredContactsResult = result;
    }

    get contacts() {
        return this.wiredContactsResult?.data ?? [];
    }

    handleViewContact(event) {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: event.currentTarget.dataset.id,
                objectApiName: 'Contact',
                actionName: 'view',
            },
        });
    }

    async handleAddContact(lastName) {
        await createRecord({
            apiName: CONTACT_OBJECT.objectApiName,
            fields: {
                [LAST_NAME_FIELD.fieldApiName]: lastName,
                [ACCOUNT_FIELD.fieldApiName]: this.accountId,
            },
        });
        await refreshApex(this.wiredContactsResult);
    }

    async handleDeleteContact(contactId) {
        await deleteRecord(contactId);
        await refreshApex(this.wiredContactsResult);
    }
}

accountId: '$accountId' (Module 6) makes the wire re-fetch automatically if a parent ever swaps to a different Account entirely — the reactive parameter pattern applied to a value received from a parent, not just a local property.