{"id":6848,"date":"2019-06-21T16:31:58","date_gmt":"2019-06-21T20:31:58","guid":{"rendered":"https:\/\/www.jitendrazaa.com\/blog\/?p=6848"},"modified":"2019-06-21T16:31:58","modified_gmt":"2019-06-21T20:31:58","slug":"lightning-web-component-event-handling-pub-sub","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-web-component-event-handling-pub-sub\/","title":{"rendered":"Lightning Web Component Event Handling &#8211; Pub Sub"},"content":{"rendered":"\n<p>It is very common to come across use case of communicating between <a href=\"https:\/\/www.jitendrazaa.com\/blog\/tag\/lightning-web-component\/\">Lightning Web Components<\/a>.<\/p>\n\n\n\n<p>If you are not interested on code explanation and directly want to jump on live demo , <a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/tools\/playground\/4gS3Ies8h\/27\/edit\">check this playground<\/a>. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Communicate between Nested Lightning Web Components<\/h3>\n\n\n\n<p>This is one of most simplest and common use case, where parent <a href=\"https:\/\/www.jitendrazaa.com\/blog\/tag\/lightning-web-component\/\">LWC<\/a> wants to react on event produced by child <a href=\"https:\/\/www.jitendrazaa.com\/blog\/tag\/lightning-web-component\/\">LWC<\/a>. <\/p>\n\n\n\n<p>In above image, <em>Model 3 <\/em>is child (nested component) of <em>Tesla. <\/em><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/c87c616df3fbf1112a9523a31c50abca.js\"><\/script>\n\n\n\n<!--more-->\n\n\n\n<p>In above<em>, Model 3 <\/em>component, custom event <em>modelclick <\/em>is raised using class <em><strong>CustomEvent<\/strong>.<\/em><\/p>\n\n\n\n<p>Lets, see how Parent Component <em><strong>Tesla <\/strong><\/em>is defined.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/f75b14dc45d9ef5001f53974b7934c4e.js\"><\/script>\n\n\n\n<p>In above parent component <em><strong>tesla<\/strong><\/em>, event raised by child component is handled just like any other events in Javascript (bubble event). In <em><strong>onmodelclick<\/strong> <\/em>function , Tesla is also raising new event with same name &#8211; <em><strong>modelclick<\/strong>. <\/em><\/p>\n\n\n\n<p><strong>That concludes, how communication happens between Parent child Lightning Web Components. <\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Lightning Web Component Event handling &#8211; Pub Sub Library<\/h3>\n\n\n\n<p>In above image, if we want Tesla event to be handled by Honda Component, traditional bubble based event handling will not work.<\/p>\n\n\n\n<p>You can either use <a href=\"https:\/\/github.com\/trailheadapps\/lwc-recipes\/tree\/master\/force-app\/main\/default\/lwc\/pubsub\">Salesforce library of Pub Sub<\/a>, or Simple Library produced by <a href=\"https:\/\/github.com\/TheVishnuKumar\/one-pub-sub-lwc\">Vishnu<\/a>.<\/p>\n\n\n\n<p>I&#8217;m going to use library created by Vishnu. Below is Javascript code for pub-sub library<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/ffc43606fafb682365ec28177962fe81.js\"><\/script>\n\n\n\n<p>Now, we have added above javascript as part of LWC, lets create a Lightning Web Component named Vehicle which will fire pub-sub event.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/bd9183a99e4e23507bafb0f951ced038.js\"><\/script>\n\n\n\n<p>Note, how pubsub js is imported on line 2 of Vehicle.js. On line 7, we are firing event using pub-sub library.  <\/p>\n\n\n\n<p>Lets create a Lightning Web Component which will handle event generated by pub sub library. <\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/8f31763afbcd129d37475b4a089156e0.js\"><\/script>\n\n\n\n<p>As seen in above code, register method is used to handle event. Also note, how unique event identifier is used to fire and register event.<\/p>\n\n\n\n<p>Feel free to comment and share your feedback. Happy coding !!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to handle events in Lightning Web Components between nested and non nested Components <\/p>\n","protected":false},"author":1,"featured_media":6870,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[462,464],"class_list":["post-6848","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce","tag-lightning-web-component","tag-lwc"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":6908,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/point-and-click\/use-lightning-web-components-in-flow\/","url_meta":{"origin":6848,"position":0},"title":"Use Lightning Web Components in Flow","author":"Jitendra","date":"October 21, 2019","format":false,"excerpt":"Endless limit for your Salesforce application by combining Flow with Lightning Web Components (LWC)","rel":"","context":"In &quot;Lightning Web Components&quot;","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"Using LWC in Flow","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6920,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/data-exchange-between-aura-lightning-web-components-lwc-and-visualforce\/","url_meta":{"origin":6848,"position":1},"title":"Event Handling between Aura, Lightning Web Components (LWC) and Visualforce","author":"Jitendra","date":"October 16, 2019","format":false,"excerpt":"How to use Lightning Message Services for event handling between Lightning Web Components, Aura Components and Visualforce","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Salesforce Lightning Message Service","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Salesforce-Lightning-Message-Service.png?fit=1200%2C1046&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":5389,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/responsive-datagrid-component-in-lightning-basics\/","url_meta":{"origin":6848,"position":2},"title":"Responsive Datagrid component in Lightning &#8211; Basics","author":"Jitendra","date":"March 15, 2016","format":false,"excerpt":"This blog post explains simple use case of Nested Lightning Component. It goes through example on how to interact and combine nested components to be used in parent Lightning component.","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Using Nested Lightning component to create responsive DataGrid","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/03\/Lightning-Data-Grid-1.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/03\/Lightning-Data-Grid-1.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/03\/Lightning-Data-Grid-1.gif?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":7140,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/using-custom-label-in-lightning-web-components-lwc\/","url_meta":{"origin":6848,"position":3},"title":"Using Custom Label in Lightning Web Components &#8211; LWC","author":"Jitendra","date":"April 4, 2020","format":false,"excerpt":"Quick Code Snippet on how to use custom label in Lightning Web Components - LWC","rel":"","context":"In &quot;Lightning Web Components&quot;","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7129,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/change-icon-color-in-lightning-web-component\/","url_meta":{"origin":6848,"position":4},"title":"Change Icon Color in Lightning Web Component","author":"Jitendra","date":"June 30, 2020","format":false,"excerpt":"Why fill css property not working for LWC Icon","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/View-Source-code-of-LWC-Icon-as-svg.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":7044,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/limitations-of-lwc\/","url_meta":{"origin":6848,"position":5},"title":"Limitations of LWC","author":"Jitendra","date":"April 22, 2020","format":false,"excerpt":"Considerations & Limitations of Lightning Web Component in Salesforce","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"LWC Not Supported","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6848","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=6848"}],"version-history":[{"count":4,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6848\/revisions"}],"predecessor-version":[{"id":6872,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/6848\/revisions\/6872"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/6870"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=6848"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=6848"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=6848"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}