LWC Event Propagation
Lightning Web Component events are built on DOM events, APIs and every object which is available in every browser. Let's visualize how events work in real time and publish subscribe utility.
Communication between components occurs through events.
1. Custom event communication in LWC(Parent to Child)
2. Custom event communication in LWC(Child to Parent)
1. Communication using method in LWC(Parent to Child) - In Aura framework, we can call method of Child component from Parent component with "aura:method". In LWC, we can make use of "@api" decorator to avail child properties in parent component directly using Javascript API.
Syntax:
SampleChildComponent.js -
@api
changeMessage(strString) {
this.message = strString.toUpperCase();
}
To access the above child method in parent component we can do like that.
SampleParentComponent.js -
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 an example to pass value from Parent Component to Child Component and show message from Parent Component:
sampleChildComp.html
===========================
<template>
Message Will Come here from Parent Component :- {message}
</template>
=> Below is a javaScript method in child component to assign value on child attribute.
sampleChildComp.js
===========================
import { LightningElement, track, api } from 'lwc';
export default class SampleChildComponent extends LightningElement {
@track message;
@api
changeMessage(strString) {
this.message = strString.toUpperCase();
}
}
=> Below is a Parent Component to call child component.
SampleParentComponent.html
<template>
<lightning-card title="Parent to Child Demo">
<lightning-layout>
<lightning-layout-item flexibility="auto" padding="around-small" >
<lightning-input label="Enter the Message" onchange={handleChangeEvent}></lightning-input>
</lightning-layout-item>
<lightning-layout-item flexibility="auto" padding="around-small">
<c-child-Comp></c-child-Comp>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
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);
}
}
2. Communication using method in LWC(Child To Parent) - In Aura, Salesforce has facilitated use of Custom Events to initiate a communication from Child to Parent. The same communication can happen in LWC with the help of create and dispatch of custom event.
a) Create Event: In order to create event, we can use customEvent() constructor. Here we are going to pass custom event name and detail of the event.
Syntax: new customEvent(sampleEventName, properties);
b) Dispatch Event: In LWC we can dispatch event using EventTarget.dispatchEvent() .
Syntax: this.dispatchEvent(new customEvent(eventName, properties));
c) Handle an Event: Event handling can be done in 2 different ways as followed
i) HTML markup: Using "on" prefix in the event name in parent component to call child component for event listener.
SampleParentComponent
<template>
<c-child-component oneventName={listenerHandler}></c-child-component >
</template>
ii) JS using addEventListener method: We can explicitly attach a listener by using addEventListener method in component as per below syntax.
SampleChildComponent
this.template.addEventListener('eventName', this.handleNotification.bind(this));
=> Below is the sample code for event propagation from Child Component to Parent Component
1. Create a Child Component to raise event.
sampleChildComponent.html
<template>
<lightning-card title="Sample Child Component">
<div class="slds-m-around_medium">
<lightning-input name="textVal" label="Enter Sample Text" onchange={handleChange}></lightning-input>
</div>
</lightning-card>
</template>
SampleChildComponent.js
import { LightningElement } from 'lwc';
export default class sampleChildComponent extends LightningElement {
handleChange(event) {
event.preventDefault();
const name = event.target.value;
const selectEvent = new CustomEvent('mysamplecustomevent', {
detail: name
});
this.dispatchEvent(selectEvent);
}
}
2. Create a Parent Component to handle the event.
SampleParentComponent.html
<template>
<div class="slds-m-around_medium">
Value From Child : {msg}
<c-child-comp onmycustomevent={handleCustomEvent}></c-child-comp>
</div>
</template>
SampleParentComponent.js
import { LightningElement , track } from 'lwc';
export default class ParentComponent extends LightningElement {
@track msg;
handleCustomEvent(event) {
const textVal = event.detail;
this.msg = textVal;
}
}