To communicate between Child to Parent component we should first understand the Events.
Lightning web components dispatch standard DOM events. Components can also create and dispatch custom events.
JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page When the page loads, it is called an event.
The standard DOM Events describes 3 phases of event propagation:
Note - Capturing phase is rarely used in real code, but sometimes can be useful. Normally it is invisible to us. The Lightning web component has only two event propagation
bubbles - A Boolean value indicating whether the event bubbles up through the DOM or not. Defaults to false.
composed - A Boolean value indicating whether the event can pass through the shadow boundary. Defaults to false.
To create an event, use the CustomEvent()
constructor.
CustomEvent()
constructor has one required parameter, which is a string indicating the event type.EventTarget.dispatchEvent()
method.EventTarget
is this
There are Three kind of child to parent communication
After placing the component on the page, you will see the following output.
modalParentComponent
and modalChildComponent
.import { LightningElement } from 'lwc';
export default class ModalParentComponent extends LightningElement {
showModal = false
showHandler() {
this.showModal = true
}
modalCloseHandler(){
this.showModal = false
}
}
<template>
<lightning-card title="Simple Event" icon-name="custom:custom14">
<div class="slds-var-m-around_medium">
<button class="slds-button slds-button_success" onclick={showHandler}>Open Modal</button>
<template if:true={showModal}>
<c-modal-child-component
header-text="Message!!"
body-text="This Modal is a Child Component. Triggered from parent and on click of close button it will dispatch an event to parent handler"
onclose={modalCloseHandler}
></c-modal-child-component>
</template>
</div>
</lightning-card>
</template>
<?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>
modalParentComponent.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 showHandler
handler on click of the buttonc-modal-child-component
.modalParentComponent .js
file, we have created a showHandler
handler in which we are changing the showModal
property value from false
to true
.c-modal-child-component
component is hidden because showModal
property is false
showModal
property become true
and c-modal-child-component
component become visibleimport { LightningElement, api } from 'lwc';
export default class ModalChildComponent extends LightningElement {
@api headerText
@api bodyText
closeHandler(){
this.dispatchEvent(new CustomEvent('close'))
}
}
<template>
<div id="myModal" class="modal">
<div class="modal-content">
<header>
<strong>{headerText}</strong>
</header>
<p>{bodyText}</p>
<footer class="text-right">
<button class="btn danger" onclick={closeHandler}>Close</button>
</footer>
</div>
</div>
</template>
/* The Modal (background) */
.modal {
display: block;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
width: 80%;
top: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
}
.btn {
border: none;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
.danger {
background-color: #f44336;
}
.success{
background-color: green;
}
.danger:hover {
background: #da190b;
}
.text-right {
text-align: right;
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>false</isExposed>
</LightningComponentBundle>
modalChildComponent
we have created two public property headerText
and bodyText
. Property become public if we decorate it with @api
.modalChildComponent.html
We have close button and on click of close button we are calling closeHandler
method.closeHandler
method we are creating the new custom event close
and dispatching it . this.dispatchEvent(new CustomEvent('close'))
close
event get's triggered it gonna catch my the method modalCloseHandler
which is map to the c-modal-child-component
component onclose
attribute.modalCloseHandler
get called it makes the showModal
property false and hide the c-modal-child-component
component After placing the component on the page, you will see the following output.