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.
barParentComponent
and barChildComponent
.barParentComponent .html
we have created a lightning-card
to give our component better looks and feellightning-card
we have created a button
with an event attribute onclick
that will trigger the changeColor
handler on click of the buttonc-bar-child-component
syntax.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.
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
barChildComponent
we have created one local property className
and one public method changeBarColor
changeBarColor
we are updating the className
property valuebarChildComponent.html
based on the className
property value, the background color changes.changeColor
method of child component and change the class which alter the background of the child templateAfter placing the component on the page, you will see the following output.
import { LightningElement } from 'lwc';
export default class BarParentComponent extends LightningElement {
changeColor() {
this.template.querySelector('c-bar-child-component').changeBarColor();
}
}
<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>
.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;
}
<?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>
import { LightningElement, api } from 'lwc';
export default class BarChildComponent extends LightningElement {
className = "greenBar";
@api changeBarColor() {
this.className = "redBar"
}
}
<template>
<div class={className}>I am child component</div>
</template>
.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;
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>
After placing the component on the page, you will see the following output.