Dear #Trailblazers,
Welcome back 🙂 to new blog post. In this blog post we are going to talk about Publish Subscribe model in Lightning Web component. Before We start let’s learn about what Pub ( Publish ) – Sub ( Subscribe ) model is.
Pub-Sub Model
Is used to transfer the information between the component which are not in the same DOM hierarchy what does this meant that the components are not connected/related with each other using parent-child relationship.
Below is the simple diagram to illustrate the Pub-Sub.

In the above image, one component is acting as publisher component and there are three different component acting as subscriber components. Between Publisher & Subscribers component there is a change and this channel is known as Pub-Sub model.
Key Points to Remember
- Pub-Sub is nothing it is a JavaScript file containing multiple methods
- Pub-Sub is like Application event in Aura Component

Now, Lets start with the implementation part
Use Case
We are going to take a very simple example, There are two components and both components do not have any relation. As a Developer, we need to make them talk & transfer the data from one component to another component.
P.S. You can have as many components as per business requirement.
Step1 – Create a PubSub Lightning Component and use below JS code for the same.
Step2 – Create Publisher Component named “pubsubPublisher” and use below code for both JS and HTML file
Code Explanation
import pubsub from ‘c/pubsub’; in this line, we are importing the pubsub component into our publisher component
pubsub.fire(‘simplevt‘, message ); This line executes the event names simplevt so any component which has subscribed simplevt event will be able to get the message.
Step3 – Create Subscriber Component named “pubsubSubscriber” and use code from below gist file for all three ( template, JS & XML file )
Code Explanation
#1 import pubsub from “c/pubsub”; We are importing the pubsub file so that we can access all the method that we created in pubsub file and exported those functions.
#2 As this is Subscriber Component, so we are registering the event
pubsub.register(“simplevt”, this.handleEvent.bind(this));
#3 This subscriber component must have a JS function which will execute when the component receives any event for that we have created below method
handleEvent(messageFromEvt) {
window.console.log("event handled ", messageFromEvt);
this.message = messageFromEvt
? JSON.stringify(messageFromEvt, null, "\t")
: "no message payload";
}
Step4 – Test the Publish Subscribe Component
As we have developed the required Component, we can add both the component either inside any Record Page, Home Page or App Page and do the Testing.
Checkout the YouTube Video with the explanation of each and every single details.
Keep Learning. Sharing is Caring 🙂 #KeepBlazing #LearnShareRepeat #AskPanther #SfdcPanther
Please do provide your valuable feedback to use. You can fill the feedback from Here.
Resource:-
4 comments
Can we publish the one message to two different lwc component which are not apart of same record details page ?
My mean is one Pub component(on account details page) and two sub component . sub1 is on Account detail page and sub2 is on Contact detail page. If I click on Button of Pub comp which is on Account page, will it also publish the message to sub2 comp as well ?
I believe yes you can. You can try it once.
We cannot use pubsub in 2 diff pages … it should be on single page only..
I saw so many videos and blogs about this pubsub .. but this is so clear.. Thank you so much