LWC – Events

Events in LWC are used to communicate with the components. If there are related components, it can be possible to communicate from Parent to Child or Child to Parent. If there are two unrelated components, we can communicate through the PubSub (Publish-Subscribe) model or with the Lightning Message Service (LMS). In this guide, we will discuss on how to communicate with events from Parent to Child, Child to Parent, and interrelated components using the PubSub model.

You can place the components in your Record Page, App Page, or Home Page. We will not specify this file (meta-xml) again under the example code snippets:

Parent to Child Communication

If two components are related to each other, this communication is possible. Here, the Parent sends the data to the Child. The parent component holds the Child component. With this approach, we can pass the Primitive data (Integer, String, Boolean, etc) from Parent to Child, pass the Non-Primitive data (Array, Object, Array of Objects, etc) from Parent to Child, passing the data to the Child component with the action on the Parent.

In order to communicate the Parent to Child, we need to make the fields, properties, and methods available in the Child component publicly visible. This can be possible by decorating the fields, properties, and methods with the “api” decorator.

Example: Declare a variable with “api” in the Child component “js” file.

Now, the Parent component uses the Child component in the HTML file via the HTML attributes.

Example: Use the variable in the Parent HTML file.

Let’s discuss some examples that describe how to communicate with Parent to Child.

Example 1:

This basic example demonstrates getting an information that is sent by the Parent to the Child.

childtComp.js

First, we create a Child component that holds the “information” variable which is publicly available.

You can view the entire “js” code in the following screenshot:

childtComp.html

Now, we specify this variable in the HTML file within the center tag.

parentComp.js

We are not doing anything in the “js” file.

parentComp.html

Place the previous Child component in your Parent HTML by passing the public variable (information) with some text.

Output:

Now, go to your Salesforce Org and place the Parent component to the “Record” page. You will see that the Child component received the information from the Parent.

Example 2:

Let’s create two input text fields which will accept the text dynamically from the UI in the Parent component. If we insert the first text in the Parent component, the child component receives this text in uppercase. Similarly, it receives the text in lowercase if we insert the second text.

childtComp.js

Create two variables – information1 and information2 – with a track decorator.

1. Create the convertToUpper() method with the “api” decorator which converts the first input text to uppercase.
2. Create the convertToLower() method with the “api” decorator which converts the second input text to lowercase.

The entire “js” code looks like the following:

childtComp.html

We display the values (Information1 and Information2) that come from the “js” file.

parentComp.js

We create two handler methods that select the child HTML template through the querySelector(). Make sure that you need to pass the correct methods that convert the text into uppercase or lowercase.

The entire “js” code looks like the following:

parentComp.html

Create an input text with handle events for both of them. Place the Child component in this Parent component.

Output:

Now, go to your Salesforce Org and place the Parent component to the “Record” page.

You will see two text inputs on the UI.

Let’s write some text in the first input and you will see that the text is converted to uppercase and is displayed in the Child component.

Write some text in the second input and you will see that the text is converted to lowercase and is displayed in the Child component.

Child to Parent Communication

Similar to the previous communication, to communicate the Child to the Parent, both components should relate to each other. We can communicate the Child to the Parent in three different approaches: calling the Parent to the Child using a simple event and calling the Parent to the Child using an event with the data and event bubbling. We will look at the simple event in this guide.

In order to communicate the Child to the Parent, we need to create and dispatch the events. For that, a custom event has to be created. A custom event is an event which is created by yourself. We can create it using the new keyword. The Event_Name can be anything (it can be a string, not beyond the uppercase, or digits). For now, we won’t discuss the options.

Syntax: new CustomEvent(‘Event_Name’,{options…})

Now, you have the custom event. The next step is to dispatch the event. To dispatch the event, we need to specify the event that we created in the EventTarget.dispatchEvent() method.

Syntax:  this.displatchEvent(new CustomEvent(‘Event_Name’,{options…})

Finally, we need to handle the event. Now, we have to call the child component in your Parent component. Pass your event name by specifying the “on” prefix to your event name. This takes the event listener handler.

            Syntax:

Example:

In this example, we create one Parent component (exampleParent) and two Child components.

1. In the first Child (exampleChild), we create an input text that allows the user to provide some text. The same text is displayed in the Parent component in the uppercase.
2. In the second Child (child2), we create an input text that allows the user to provide some text. The same text is displayed in the Parent component in the lowercase.

exampleChild.js

We create a handleChange1 method that creates the  “linuxhintevent1” CustomEvent with the detail as the target value. After that, we dispatch this event. Embed the following snippet in this “js” file.

exampleChild.html

The previous handle method that is created in “js” is handled based on the lightning input in the HTML component.

child2.js

We create a handleChange2 method that creates the “linuxhintevent2” CustomEvent with the detail as the target value. After that, we dispatch this event.

child2.html

The previous handle method that is created in “js” is handled based on the lightning input in the HTML component.

exampleParent.js: Embed this snippet in your “js” file inside the class.

1. Convert the input to uppercase using the toUpperCase() function in the handleEvent1() and store it in the Information1 variable
2. Convert the input to lowercase using the toLowerCase() function in the handleEvent2() and store it in the Information2 variable.

exampleParent.html

Now, display the two variables (Information1 & Information2) in the Parent HTML component by specifying both the Child components.

Output:

Now, go to your Salesforce Org and place the Parent component to the “Record” page.

You can see that two Child components exists in the Parent.

Let’s type some text in the input text under the Child 1 component. We can see that our text is displayed in uppercase on the Parent component.

Give some text in the input text under the Child 2 component. We can see that our text is displayed in lowercase on the Parent component.

It can also be possible to enter both texts at a time.

PubSub Model

When you are working with independent components (not related to each other) and if you want to send the information from one component to another, you can use this model. PubSub stands for Publish and Subscribe. The component that sends the data is known as the Publisher and the component that receives the data is known as the Subscriber. It is required to use the pubsub module to send the events between the components. It’s already predefined and given by Salesforce. The file name is pubsub. You have to create an LWC component and type this code in your javascript file which is “pubsub.js”.

Example:

Let’s create two components – Publish and Subscribe.

In Publish, we allow the users to create an input text. In clicking the button, the data is received in uppercase and lowercase in the Subscribe component.

publish.js

Embed this code in your JSON file. Here, we get the information and publish the information.

The information variable will be uppercase and the information1 will be lowercase. Make sure that you include this import statement at the starting of the code – import pubsub from ‘c/pubsub’.

It should look like:

publish.html

First, we create the lightning-input to accept the text with the handler information. After that, one button is created with the onclick functionality. These functions are in the previous “js” code snippet.

subscribe.js

Embed this code in your JSON file. Here, we first Subscribe the information by converting it into uppercase and lowercase separately inside the callSubscriber() method. After that, we invoke this method through the connectedcallback() method. Make sure that you include this import statement at the starting of the code – import pubsub from ‘c/pubsub’.

It should look like this:

subscribe.html

We display the text in uppercase (stored in information) and lowercase (stored in information2).

Output:

Add these two components to your page. Make sure that both the components are on the same page. Otherwise, the functionality won’t work.

Let’s enter some text in the “Publish” component and click the “Send Data” button. We can see that the text is received in uppercase and lowercase.

Conclusion

Now, we are able to communicate with the LWC components through the event concept in Salesforce LWC. As part of this guide, we learned how to communicate from the Parent to the Child and from the Child to the Parent. The PubSub model is used in case your components are not related to each other (not Parent – Child). Each scenario is explained with a simple example and make sure that you include the code that is provided at the start of this guide in the “meta-xml” file.