LWC Communication Part-1 (Passing data from Parent to child component)

Communication is very important to write dynamic and flexible Lightning web Component. There are multiple way to communicate between two component in Lightning Web Component.

In this blog, We will see how to pass data from Parent component to child component. Lets have a look on Component design:-

We have two Component here:-

• parentLwcComponent
• childDynamicRecordForm

childDynamicRecordForm have record-form base component to show record detail in view mode with full layout. It is reusable and can be called in any other component by passing the record-id and object-api-name.

childDynamicRecordForm.html

<template>
  <lightning-record-form
    record-id={getIdFromParent}
    object-api-name={objectApiName}
    layout-type="Full"
    mode="view"
  >
  </lightning-record-form>
</template>

childDynamicRecordForm.js

The properties are annotated with @api decorator to expose it to parent component.

import { LightningElement, api } from "lwc";

export default class ChildDynamicRecordForm extends LightningElement {
  @api getIdFromParent;
  @api objectApiName;
}

childDynamicRecordForm.js-meta.xml

We don’t need to make isExposed to true as we are not exposing it directly to the Home, Record or App page. We can call this component in any other component.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="childDynamicRecordForm">
    <apiVersion>46.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

parentLwcComponent

This component is calling another component in it by passing the record-id dynamically using @api recordId which gives the current record id.

parentLwcComponent.html

<template>
  <c-child-dynamic-record-form
    get-id-from-parent={recordId}
    object-api-name={objectApiName}
  ></c-child-dynamic-record-form>
</template>

parentLwcComponent.js

@api recordId will automatically gives you the current record id. We have kept objectApiName as public because we have exposed this property to Lightning App Builder.

import { LightningElement, api } from "lwc";

export default class ParentLwcComponent extends LightningElement {
  @api recordId;
  @api objectApiName;
}

parentLwcComponent.js-meta.xml

We have exposed the component to record page only as home and app page do not give any record id to recordId property defined in js file. objectApiName is coming from Lightning App Builder through property pane in it. Admin is suppose to provide a value to it while placing the component to record page in App Builder Canvas.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="ParentLwcComponent">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="objectApiName" type="String" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

NOTE Property names in JavaScript are in camel case while HTML attribute names are in kebab case (dash-separated) to match HTML standards.

Points to Remember:

Owner:- The owner is the component that owns the template. In this example, the owner is the c-parent-lwc-component component.  The owner controls all the composed components that it contains. The owner can:

• Set public properties on composed components
• Call methods on composed components
• Listen for any events fired by the composed components

Read more here:- Compose Components