Events in Lightning web components (LWC) | Communicate with Events

In this post we will talk about how to use the lightning web component events to communicate between components. Events in Lightning web components are built on DOM Events, a collection of APIs and objects available in every browser. Here we will be see how to the events using the CustomEvent interface and publish-subscribe utility.

Component Communication through events

There are typically 3 approaches for communication between the components using events.

1. Communication using Method in LWC ( Parent to Child )
2. Custom Event Communication in Lightning Web Component (Child to Parent )
3. Publish Subscriber model in Lightning Web Component ( Two components which doesn't have a direct relation )

NOTE:- If you want to communicate the Lightning web component with Visualforce page then we can use Lightning Message Service (LMS).

Option 1) Communication using Method in LWC (Parent to Child)

In Aura framework, we can call the method of Child Component from the Parent Component with the help of <aura:method>  (Please check this post for <aura:method in aura). In LWC also we can do the same. In LWC Aura Methods Become JavaScript Methods.

For this we have use the @api decorator to make the children properties / method public available so parent can be able to call it directly using JavaScript API. For example create one public method (which we need to access in parent component) in ChildComponent with @api decorator like below

ChildComponent 

@api
changeMessage(strString) {
     this.Message = strString.toUpperCase();
}

To access the above child method in parent component we can do like that.

ParentComponent

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

Lets take one example to pass value from parent component to child component.

1. Create one child Component to show message from parent component. 
   childComp.html
   
   <template>
       Message Will Come here from Parent Component :- {Message}
   </template>
2. Create javaScript method in child component to assign value on child attribute.            childComp.js
   
   import { LightningElement, track, api } from 'lwc';
   export default class ChildComponent extends LightningElement {
       @track Message;
       @api
       changeMessage(strString) {
            this.Message = strString.toUpperCase();
       }
   }
3. Create one Parent Component to call child component. 
   ParentComponent.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>
4. 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);
       }
   }
5. Update your meta.js file to make this component available for App, home page.
   ParentComponent.js
   
   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="parentComponent">
       <apiVersion>45.0</apiVersion>
       <isExposed>true</isExposed>
       <targets>
           <target>lightning__AppPage</target>
           <target>lightning__RecordPage</target>
           <target>lightning__HomePage</target>
       </targets>
   </LightningComponentBundle>

Output :

Option 2) Custom Event Communication in Lightning Web Component (Child to Parent)

We already talk about Event in Aura. Lets talk about Lightning Web Components (LWC), here Custom Event is used to make the communication from Child Component to Parent Component. With LWC we can create and dispatch the custom event.

1. Create and Dispatch an Event

   • Create Event : We can use the customEvent() constructor to create an event. In constructor we need to pass custom event name and detail of the event.

     new customEvent(eventName, props);

   • Dispatch Event : We have to dispatch an event at with EventTarget.dispatchEvent() method.

       this.dispatchEvent(new customEvent(eventName, props);

2. Handle an Event : There are two ways to listen to an event

   • Declarative via html markup : We need to add “on” prefix in the event name in Parent Component during calling of Child Component for Declaratively event listener.
      ParentComponent
         <template>
               <c-child-component oneventName={listenerHandler}></c-child-component >
          </template>
     
     
   • JavaScript using addEventListener method : We can explicitly attach a listener by using the addEventListner method in the parent component like below :
      ChildComponent
     this.template.addEventListener('eventName', this.handleNotification.bind(this));

Lets take one example for "Declarative via html markup"

1. Create one child component component from where we will raise a event
1. Create child html file to get value from user.
   childComp.html
   
   <template>
       <lightning-card title="Child Component">
           <div class="slds-m-around_medium">
               <lightning-input name="textVal" label="Enter Text" onchange={handleChange}></lightning-input>
           </div>
       </lightning-card>
   </template>
2. Now update Child Comp javaScript file to raise a CustomEvent with text value
   childComp.js
   
   import { LightningElement } from 'lwc';
   
   export default class ChildComp extends LightningElement {
   
      handleChange(event) {
           event.preventDefault();
           const name = event.target.value;
           const selectEvent = new CustomEvent('mycustomevent', {
               detail: name
           });
          this.dispatchEvent(selectEvent);
       }
   }
2. Create one Parent component where we will handle the event
1. Now create parent component. We need to add prefix as “on” before the custom event name and in parent component we need to invoke the event listener as handleCustomEvent using onmycustomevent attribute.
   ParentComponent.html
   
   <template>
       <div class="slds-m-around_medium">
           Value From Child :  {msg}
           <c-child-comp onmycustomevent={handleCustomEvent}></c-child-comp>
       </div>
   </template>
2. Now update parent component javaScript file and add handleCustomEvent method.
   ParentComponent.js
   
   import { LightningElement , track } from 'lwc';
   
   export default class ParentComponent extends LightningElement {
       @track msg;
       handleCustomEvent(event) {
           const textVal = event.detail;
           this.msg = textVal;
       }
   }

   
Output :-

Lets see how we can use  "JavaScript using addEventListener method | Attaching event Listener Programmatically"

1. We can use the same above sample and do below change in parent component
1. Update parent component JavaScript like below.
   ParentComponent.js
   
   import { LightningElement , track } from 'lwc';
   
   export default class ParentComponent extends LightningElement {
       @track msg;
     
       constructor() {
           super();   
           this.template.addEventListener('mycustomevent', this.handleCustomEvent.bind(this));
       }
   
       handleCustomEvent(event) {
           const textVal = event.detail;
           this.msg = textVal;
       }
   }
2. Remove onmycustomevent attribute from child component tag. like below
   ParentComponent.html
   
   <template>
       <div class="slds-m-around_medium">
           Value From Child :  {msg}
           <c-child-comp ></c-child-comp>
       </div>
   </template>
3.  Set the bubbles: true while raising the event like below
   childComp.js
   
   import { LightningElement } from 'lwc';
   
   export default class ChildComp extends LightningElement {
   
      handleChange(event) {
           event.preventDefault();
           const name = event.target.value;
           const selectEvent = new CustomEvent('mycustomevent', {
               detail: name ,bubbles: true
           });
         this.dispatchEvent(selectEvent);
       }
   }

Event Propagation: When an event is fired the event is propagated up to the DOM. Event propagation typically involves two phases event bubbling and event capturing. The most commonly used event propagation phase for handling events is event bubbling. In this case the event is triggered at the child level and propagates up to the DOM. Where as event capturing phases moves from top to bottom of the DOM. This phase is rarely used for event handling.

The below picture shows the event phases both in capture and bubbles phase. In LWC we have two flags which determines the behavior of event in event bubbling phase.

1. bubbles A Boolean value indicating whether the event bubbles up through the DOM or not. Defaults to false.
2. composed A Boolean value indicating whether the event can pass through the shadow boundary. Defaults to false.

reference: https://developer.salesforce.com/docs/component-library/documentation/lwc/events_propagation

Option 3) Publish Subscriber model in Lightning Web Component

Application Events in aura become a Publish-Subscribe Pattern in Lightning web components. We use an library called pubsub to achieve the communication between two components which doesn't have a direct relation to each other. This works like a typical publish subscribe model. Where an event is subscribed by a component and handled when another component which fires/publishes the event within the same scope.


Please use this link to get the pub sub utility code. Pubsub module support below three method

1. Register 
2. UnRegister
3. Fire

Follow below step for Pub Sub module

1. Import Pub Sub file from here.

2. Register the Event

1.  Add JavaScript Code in Component to register and unregister the event. In this JS file, invok registeredListener() and unregisterAllListeners() in the respective methods such as connectedCallback() and disconnectedCallback().
   MyComponent.js
   
   import { registerListener, unregisterAllListeners} from 'c/pubsub';
   export default class MyComponent extends {
   
       @track Message;
       connectedCallback() {
           registerListener('messageFromSpace', this.handleMessage, this);
       }
      
       handleMessage(myMessage) {
           this.Message = myMessage;
           //Add your code here
       }
      
       disconnectCallback() {
           unregisterAllListeners(this);
       }
   }

3. Fire the event

1.  Fire the event from other Component. In that js file, We need to trigger the event with name and value. Remember, we also need to send the page reference attribute as current page reference for successful communication
   OtherComponent.js
   
   import {  fireEvent } from 'c/pubsub';
   import { CurrentPageReference } from 'lightning/navigation';
   export default class OtherComponent extends LightningElement {
        @track myMessage;
        @wire(CurrentPageReference) pageRef;
   
        sendMessage() {
             fireEvent(this.pageRef, 'messageFromSpace', this.myMessage);
        }
   }

Please check below post on Lightning Web Components:-

1. Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org
2. Invoke Apex Controller from Lightning Web Component | Lightning Web Component inside Another LWC
3. Design attributes in Lightning Web Components | CSS and SVG Files | Lightning Web Components | targetConfigs
4. How to get current user id in lightning web component | Access logged in user ID in LWC 
5. Toast Notification in Lightning Web Components | ShowToastEvent |  (LWC)  
6. Lightning Web Components Best practices
7. Lightning datatable In Lightning Web Components | lightning datatable inline edit
8. Lightning Message Service (LMS) | MessageChannel

Check our YouTube Channel for more recording in Lightning Web Components. 

Thanks,
Amit Chaudhary