Parent to Child Event Communication in LWC

Parent to Child Event Communication in LWC : Generally Aura framework, we can call the method of Child Component from the Parent Component with the help of <aura: method>. In LWC Aura Methods Become JavaScript Methods.

in LWC, we have to use the @api decorator to make the children properties/method public available so a parent can be able to call it directly using JavaScript API. For example, create one public method (which we need to access in parent component) in ChildComponent with @api decorator like below.

Child Component

@api
changeMessage(strString) {
this.Message = strString.toUpperCase();
}

In order to access that above child method in the parent component.

ParentComponent. this.template.querySelector('c-child-component').changeMessage(event.target.value);

The querySelector() method is a standard DOM API that returns the first element that matches the selector.

Below is simple syntax to pass value from parent component to child component.

childComp.html

<template>
Parent Component Message:- { Message}
</template>

Create a javaScript method in the child component to assign a value on child attribute. 

ChillfComp.js

import { LightningElement, track, api } from 'lwc';
export default class ChildComponent extends LightningElement {
@track Message;
@api
changeMessage(strString) {
this.Message = strString.toUpperCase();
}
}

Create one Parent Component to call child component(ParentComponent.html)
Now Create JavsScript method in Parent component to call child method with “this.template.querySelector”.

ParentComponent.js

import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement {
handleChangeEvent(event){
this.template.querySelector(‘c-child-Comp’).changeMessage(event.target.value);
}
}

Example:

We will two Components one for parent and other for child.

  • parentComponent
  • childComponent

ChildComponent creating like record-form base component to display the record detail in view mode. It is reusable and can be called in any other component by passing the record-id and object-api-name.

childComponent.html

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

childComponent.js

@api decorator is used to expose it to parent component.

import { LightningElement, api } from "lwc";
export default class ChildComponent extends LightningElement {
  @api getIdFromParent;
  @api objectApiName;
}

childComponent.js-meta.xml

No changes needed for this example.

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

parentComponent

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

parentComponent.html

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

parentComponent.js

import { LightningElement, api } from "lwc";
export default class ParentComponent extends LightningElement {
  @api recordId;
  @api objectApiName;
}

parentComponent.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.

<?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>
Scroll to Top