Pub-Sub in Lightning Web Component

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:-

• Bind method in JS