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.




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;


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


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




@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;


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">
        <targetConfig targets="lightning__RecordPage">
            <property name="objectApiName" type="String" />

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


  1. HI You mentioned child component name as childDynamicRecordForm but in html code u mentioned with – in between could u please explain this. let say my LWC name is PPP_WebinarDisplay, How should i call my child in to parent

    1. Property names in JavaScript are in camel case while HTML attribute names are in kebab case (dash-separated) to match HTML standards. For example, a JavaScript property named itemName maps to an HTML attribute named item-name.

      You can use underscores in component folder names, but they don’t map to kebab case in markup. The names are legal because the namespace is separated with a hyphen, but most users expect hyphens instead of underscores in a web component name. For example, this component’s markup references the my_component component. It’s legal, it just looks a little odd.

      < c-my_component>< /c-my_component>

  2. Hi Sanket,
    i have a requirement where i have to pass couple of parameters to my child component.
    Curreny i am querying those component in my parent component constructor and using a flag to hide child component so that it will not get inserted into dom .

    i am getting undefined value for all the child parameters even i am passing all those value when i am calling my child component from Ui.

    I can post my code as well if you want.

  3. while deploying parent web component i am getting some plug in error
    [Line: 3, Col: 9] LWC1002: Error in module resolution: Unexpected token (Note that you need plugins to import files that are not JavaScript)

      1. I’m running into this same problem. It’s the parent component that throws the error and I can’t figure out how to fix it.

  4. No MODULE named markup://c:childWc found : [markup://c:firstapplwc] , This is the error i got in parent javascript page

Leave a Reply