Component To Component Event Communication Using PubSub Module | Lightning Web Component Part 10

In this tutorial, you will learn how to communicate from one sibling component to another sibling component using the PubSub module in the lightning web component. I am covering the following topics in this session
1 Event communication overview
2. What is PubSub design pattern
3. How to create your own pubsub library
4. What is Store in pubsub module
5. Create a subscribe method
6. Create a publish method
7. How to use the pubsub library in Components
8. Basic Demo from one sibling to another sibling communication using pubsub
9. real-time example using pubsub
LINKS USED IN THIS VIDEO
======================
LIGHTNING COMPONENT LIBRARY- developer.sale...
LIGHTNING DESIGN SYSTEM - www.lightningd...
GITHUB - github.com/kar...
FOR COOL STUFF OF LIGHTNING WEB COMPONENT
salesforcelight...
FOLLOW ME -
FACEBOOK - / salesforcetroop
LINKEDIN - / salesforce-troop
TWITTER - @karkra_nikhil
This is especially for all the students and IT professional who wants to make their career in Salesforce.
PLEASE DO LIKE, SHARE AND SUBSCRIBE THIS VIDEO WITH ALL YOUR STUDENT NETWORK, IT NETWORK AND SALESFORCE NETWORK.
Let everyone learn Salesforce and become a part of our #Ohana.

[@ruinfirefly2088]

Since you typed the code on camera, it was way easy to follow and understand. Thanks dude!

[@shivansawant3347]

Best LWC tutorial is here

[@Lets_Start_With_Myself]

Excellent explanation sir...............................

[@hemanthbakthavatsalu5211]

Hello Nikhil - Your videos were amazing. so far the BEST I have seen anywhere to learn LWC from the ground up.. Whenever you get a chance, can you please clarify on below queries:
1. How does using the arrow function solve the "this" property issue. so
subscriberCallback=(event)=>{
let updatedList = this.accordionList.map(item=>{
return item.name === event ? { ...item, selected: true } : { ...item, selected: false }
})
this.accordionList = [...updatedList]
}

[@nitinsen2939]

i have 2 input field on one component and 2 other fields on second component i want to get the first component data in 2nd component so please help me that how i use pub sub in that
note:- i only have 2 components and they are in different different places on a same page

[@santanuroy571]

Superb Nikhil this is what i wanted....can you please also help me if there's any other situation pub sub is used in real time projects....?

[@salesforcetroop]

Hi Santanu,
It's very useful in a scenario where your two components are not connected directly and you want to send some message to another component.
I have used this in a scenario where on change of user profile pic I want to inform my chatter component to change the pic.

[@gaurangpatel5194]

can we use Lightning Message service here? Which one is best?

[@salesforcetroop]

Lightning Message service is better in all senses. It covers all the communication like lwc to vfpage or lwc to aura and so on... I already have a video for LMS.

[@venkataramireddy7526]

In subscribercallback function ""this" is undefined for me when I tried this last example(accordionlist). Any Idea why "this" is undefined?

[@salesforcetroop]

Make sure u are using the arrow function. If you create a callback function without the arrow function context of this will be lost.

[@venkataramireddy7526]

@@salesforcetroop Thanks for u r reply. I am using arrow functions only.below is the code. I just changed the data. buttonList = [
{ name: "brand", active: false },
{ name: "destructive", active: false },
{ name: "success", active: false }
];
connectedCallback() {
this.callSubscriber();
}
callSubscriber() {
pubsub.subscribe("buttonClick", this.subscribercallback);
}
subscribercallback(data) {
console.log(this); // this is coming as undefined
let updateList = this.buttonList.forEach((item) => {
alert(item);
});
}

[@salesforcetroop]

@@venkataramireddy7526 add your code to the playground click save button and share the link with me
developer.salesforce.com/docs/component-library/tools/playground

[@venkataramireddy7526]

@@salesforcetroop Here is the link. developer.salesforce.com/docs/component-library/tools/playground/DhaLI9vui/7/edit I have added both components to app builder page. I am not using any container(parent) component. The previous example "hello from child one" worked fro me.

[@salesforcetroop]

@@venkataramireddy7526 change subscribercallback(data) to subscribercallback=(data)=> { . As I mentioned in my previous comments you have to change the method to an arrow function. Another approach is
pubsub.subscribe("buttonClick", this.subscribercallback); change this to pubsub.subscribe("buttonClick", this.subscribercallback.bind(this));