Developers

Lightning Web Component Communication Using Events

By Ravi Teja

Lightning Web Components were first introduced in 2019 as an upgrade to Aura Components. Since then, it has been made clear that going forward, Aura Components are on their way out and Lightning Web Components are the future of Salesforce customization.

In this article, we’ll cover how you can use Lightning Web Components with Events, including some sample code you can use to create your own.

What Are Lightning Web Components?

Lightning Web Components (LWCs) make up a user interface (UI) framework that Salesforce Developers use to create customized pages and functions on the Salesforce platform. LWCs use a standardized JavaScript framework, HTML, and CSS, without a third-party framework. These components are reusable ‘building blocks’ that Salesforce Admins can deploy for a variety of use cases.

READ MORE: Your Guide to Lightning Web Components

How to Use Events in a Lightning Web Component

From here on, we’ll look closely at DOM Events and how they interact with LWCs. Events in Lightning Web Components are built on DOM Events and dispatch standard DOM Events (a collection of APIs and Objects which are available in-browser).

What Is a DOM Event?

HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document. Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).

How Does It Work?

In Lightning Web Components, we can create and dispatch custom events. Events are utilized to communicate up the component containment hierarchy. EventTarget Interface is implemented in LWC to dispatch, listen to, and handle events.

The elements involved in the DOM Events System are:

  • An Event Name, known as Type.
  • Configuration in order to initialize an event.
  • A JavaScript Object that emits the event.

Let’s have a look at three different ways to communicate between Lightning Web Components using Events.

1. Parent-to-Child Communication

To pass the details from a parent-to-child component, public methods or public properties can be used. An API Decorator should be used to expose the child component properties/methods available to the parent component.

Below is the code snippet that shows how parent-to-child communication works in Lightning Web Components.

Note: sampleParent is the parent component and sampleChild is the child component. A Message attribute is set from parent to child component.

sampleParent.html
sampleParent.js
sampleParent.js-meta.xml
sampleChild.html
sampleChild.js

2. Child-to-Parent Communication

Custom Event can be used to communicate from child component to parent component.

CustomEvent() constructor can be used to create a custom event. Custom Event Name and properties should be passed into the constructor. The dispatchEvent() method is used to dispatch an event, and the code looks like this:

this.dispatchEvent(newcustomEvent(eventName, props); 
EventTarget.dispatchEvent()

To handle an Event declaratively with a HTML markup, add “on” as a prefix keyword for the event name in the parent component when calling the child component for the declarative event listener.

Below is the code snippet that shows how child-to-parent communication works in Lightning Web Components.

Note: parentCmp is the parent component and childCmp is the child component. A custom event is dispatched from the child component to parent component.

parentCmp.html
parentCmp.js
parentCmpjs-meta.xml
childCmp.html
childCmp.js

You can also handle an Event in JavaScript by using the addEventListener method, which can be used to attach the listener to the parent component. The code looks like this:

this.template.addEventListener('<eventName>',this.handleCustomEvent.bind(this));


3. Communication Between Unrelated Components

Communication between components which aren’t in the same DOM tree (unrelated components) can be achieved by using the publish-subscribe model. Essentially, one component subscribes to an event, whereas another component publishes the event and handles it in the same scope.

Summary

Hopefully this article has helped you understand how to communicate between Lightning Web Components using Events, as well as the different ways available for communication across parent-child, child-parent, or unrelated Lightning Web Components. If we’ve missed anything, let us know in the comments.

The Author

Ravi Teja

Ravi is a Salesforce Consultant at a global consulting firm and is a 12x Salesforce Certified Application Architect.

Leave a Reply