Parent to Child Communication by calling the Child method from the parent component.

In this article, we will see how we can communicate from Parent to Child Communication by calling the Child method from the parent component.

Let's understand how this works from the below fig.

fig: Parent to Child Communication by calling the Child method from the parent component
fig: Parent to Child Communication by calling the Child method from the parent component

  1. Create two LWC Components barParentComponent and barChildComponent.
  2. Add the code to the corresponding file from the code given below.
  3. In the parent component,barParentComponent .html we have created a lightning-card to give our component better looks and feel
  4. Withing thelightning-card we have created a button with an event attribute onclick that will trigger the changeColor handler on click of the button
  5. Below button we are calling the child component using c-bar-child-component syntax.
  6. In barParentComponent .js file, we have created a changeColor handler in which we call the following line

    this.template.querySelector('c-bar-child-component').changeBarColor();

    this.template.querySelector is used to fetch the element from the DOM. In our case, we are calling the child component. It will fetch all the properties of the barChildComponent and from which we are accessing the changeBarColor method.

  7. changeBarColor is the custom method of the child component and this method to be available on the parent we have to make it public using the @api
  8. In barChildComponent we have created one local property className and one public method changeBarColor
  9. In the changeBarColor we are updating the className property value
  10. in barChildComponent.html based on the className property value, the background color changes.
  11. Overall, when we click the button in the parent component, it will call the changeColor method of child component and change the class which alter the background of the child template

On Click demo Output

After placing the component on the page, you will see the following output.

fig:  Parent to Child Communication by calling Child method from Parent component output


Parent component

barParentComponent.js
import { LightningElement } from 'lwc';

export default class BarParentComponent extends LightningElement {
    changeColor() {
        this.template.querySelector('c-bar-child-component').changeBarColor();
    }
}
barParentComponent.html
 <template>
    <div class="margin-bottom-2rem">
        <lightning-card title="Calling child method from parent" icon-name="custom:custom14">
            <div class="slds-m-around_medium">
                <div class="parent-wrapper">
                    <button class="btn" onclick={changeColor}>Click me to change bar color</button>
                    <div class="child-wrapper">
                        <c-bar-child-component></c-bar-child-component>
                    </div>
                    
                </div>
            </div>
        </lightning-card>
    </div>
</template>
barParentComponent.css
.btn {
  border: none; /* Remove borders */
  color: white; /* Add a text color */
  padding: 14px 28px; /* Add some padding */
  cursor: pointer; /* Add a pointer cursor on mouse-over */
  background: #2196f3;
}
.parent-wrapper{
    padding: 10px;
    border: 5px solid #00a1e0;
}
.child-wrapper{
    padding: 10px;
    border: 2px solid #3cc2b3;
    margin: 10px;
}
barParentComponent.js-meta.xml
<?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>

Child component

barChildComponent.js
import { LightningElement, api } from 'lwc';

export default class BarChildComponent extends LightningElement {
    className = "greenBar";
    @api changeBarColor() {
        this.className = "redBar"
    }
}
barChildComponent.html
 <template>
    <div class={className}>I am child component</div>
</template>
barChildComponent.css
.redBar{
    background:red;
    height: 50px;
    margin: 10px;
    color: white;
    text-align: center;
    line-height: 50px;
}
.greenBar{
    background:green;
    height: 50px;
    margin: 10px;
    color: white;
    text-align: center;
    line-height: 50px;
}
barChildComponent.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>

On Click demo Output

After placing the component on the page, you will see the following output.

fig:  Parent to Child Communication by calling Child method from Parent component output

Site developed by Nikhil Karkra © 2021 | Icons made by Freepik