value change handler in Lightning Web Component when parent passes value to child

Lightning Web Component has the ability to pass data from parent component to child component, but sometime you might need value change handler in child Lightning Web Component when the value is passed from parent Lightning Web Component. To execute logic each time a public property in child component is set, write a custom setter. If you write a setter for a public property, you must also write a getter. Use getter and setter in Lightning Web Component to modify data. Let’s explore the use case of value change handler in Lightning Web Component.

Use Case – value change handler in Lightning Web Component

There are two Lightning Web Component – parent and child. Parent contains the child Lightning Web Component. We need to pass data to child from parent having getter exposed as public property and executes a logic in child whenever the value is changed using setter. Lets deep dive into the code and create two Lightning Web Component with name parent and child. Each Lightning Web Component will be created with three files –html, js and js-meta.xml.

child.html

The HTML file of the child Lightning Web Component shows the value of the property with name fruit defined in js file of the component.

<template>
    The fruit name is : {fruit}
</template>

child.js

To implement value change handler in Lightning Web Component, we are going to define fruit as private property which will be set by public getter named fruitName. The setter calls setAttribute() to reflect the property’s value to the HTML attribute and calling a method named handleValueChange. The handleValueChange method prints the log in the browser console. You must keep the property name same in both getter and setter in Lightning web Component.

import { LightningElement, api } from 'lwc';
export default class Child extends LightningElement {
    fruit;
    @api get fruitName() {
        return this.fruit;
    }
    set fruitName(value) {
        this.setAttribute('fruitName', value);
        this.fruit = value;
        this.handleValueChange(value);
    }

    //a method called in setter
    handleValueChange(value) {
        console.log(value);
        //do something
    }
}

child.js-meta.xml

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

parent.html

HTML file of the parent Lightning Web Component contains input field having a change handler in js file. It also calls the child Lightning Web Component and pass the value of the getter exposed as public property in child component.

<template>
    <lightning-input onchange={handleChange} label="Enter a fruit name"></lightning-input>
    <div class="slds-card slds-box">
        <c-child fruit-name={fieldValue}></c-child>
    </div>
</template>

parent.js

The onchange handler of the lightning-input field sets the field value to a private property named fieldValue. Check this blog to understand how to get field value on change in Lightning Web Component:- HOW TO HANDLE MULTIPLE LIGHTNING-INPUT WITH A SINGLE ONCHANGE EVENT HANDLER IN LIGHTNING WEB COMPONENT

import { LightningElement } from 'lwc';

export default class Parent extends LightningElement {
    fieldValue;
    handleChange(event) {
        this.fieldValue = event.target.value;
    }
}

parent.js-meta.xml

We can use this component in App, Home and Record Lightning Pages.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>