Can check https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/CustomEvent\/CustomEvent<\/a> Now let\u2019s get your hand dirty with code first and then will understand the flow of code.<\/p>\n 1. First, we have created a child component to receive user input and onchange handler is used to capture the input value. 5. When this event fired it calls passToParent. In this event, we received the value and set it as progress bar value<\/p>\n This way we are passing value from child to parent component. Using the below syntax can send multiple data as well.<\/p>\n I hope this blog helped you. Keep learning and if you require salesforce development services<\/a> then get in touch with our salesforce consulting<\/a> team.<\/p>\n In this blog, we will learn the child to parent communication in LWC. We are going to create a progress bar component to understand how a child event can be bubbled up to the parent. We will use the custom event of js to achieve this. To create a custom event we will use CustomEvent()<\/p>\n","protected":false},"author":39,"featured_media":3399,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"MSN_Categories":"Uncategorized","MSN_Publish_Option":false,"MSN_Is_Local_News":false,"MSN_Is_AIAC_Included":"Empty","MSN_Location":"[]","MSN_Add_Feature_Img_On_Top_Of_Post":false,"MSN_Has_Custom_Author":false,"MSN_Custom_Author":"","MSN_Has_Custom_Canonical_Url":false,"MSN_Custom_Canonical_Url":"","_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[87],"tags":[],"class_list":{"0":"post-3379","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-salesforce-development"},"modified_by":"emizentech","featured_image_src":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2020\/06\/Child-To-Parent-Communication-In-LWC-1.jpg","featured_image_src_square":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2020\/06\/Child-To-Parent-Communication-In-LWC-1.jpg","author_info":{"display_name":"Virendra Sharma","author_link":"https:\/\/multisitelocal.ezxdemo.com\/blog\/author\/salesforce"},"_links":{"self":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/3379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/comments?post=3379"}],"version-history":[{"count":0,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/3379\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media\/3399"}],"wp:attachment":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media?parent=3379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/categories?post=3379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/tags?post=3379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nTo fire the trigger use the dispatchEvent method of EventTarget.
\nCan check https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/EventTarget\/dispatchEvent<\/a><\/p>\nAlso Read: How To Use Properties In Lightning Web Component<\/a><\/h4>\n
<\/span>InputProgressBar.html<\/span><\/h3>\n
<template>\r\n <lightning-tile label='Child Component'>\r\n <lightning-input name='barMeter' label='Enter Value for Progress Bar' onchange={progress}><\/lightning-input>\r\n <\/lightning-tile>\r\n<\/template><\/pre>\n<\/span>inputProgressBar.js<\/span><\/h3>\n
import { LightningElement } from 'lwc';\r\n\r\nexport default class InputProgressBar extends LightningElement {\r\n \r\n progress(event){\r\n const custEvent = new CustomEvent(\r\n 'callpasstoparent', {\r\n detail: event.target.value \r\n });\r\n this.dispatchEvent(custEvent);\r\n }\r\n}<\/pre>\n<\/span>parentBarCmp.js<\/span><\/h3>\n
import { LightningElement, track } from 'lwc';\r\n\r\nexport default class ParentBarCmp extends LightningElement {\r\n @track barVal = 10;\r\n passToParent(event){\r\n this.barVal = event.detail;\r\n }\r\n\r\n}<\/pre>\n<\/span>parentBarCmp.html<\/span><\/h3>\n
<template>\r\n <lightning-tile label='Parent Bar Component'>\r\n <lightning-progress-bar value={barVal} size=\"large\"><\/lightning-progress-bar>\r\n <\/lightning-tile>\r\n <c-input-progress-bar oncallpasstoparent={passToParent}><\/c-input-progress-bar>\r\n<\/template><\/pre>\n<\/span>parentBarCmp.js-meta.xml<\/span><\/h3>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<LightningComponentBundle xmlns=\"http:\/\/soap.sforce.com\/2006\/04\/metadata\">\r\n <apiVersion>48.0<\/apiVersion>\r\n <isExposed>true<\/isExposed>\r\n <targets>\r\n <target>lightning__AppPage<\/target>\r\n <target>lightning__RecordPage<\/target>\r\n <target>lightning__HomePage<\/target>\r\n <\/targets>\r\n<\/LightningComponentBundle><\/pre>\n
<\/a><\/div>\n
\n2. We have created a parent component that is showing a progress bar based on input that the user enters in the child component.
\n3. So we need to pass this input value from child to parent component and to achieve this we used the event bubbling concept.
\n4. We have created a custom event and passed that input value and fired that event using dispatchEvent. This way callpasstoparent event fired<\/p>\nthis.dispatchEvent(custEvent);<\/pre>\n
<c-input-progress-bar oncallpasstoparent={passToParent}><\/c-input-progress-bar><\/pre>\ndetail : {\r\n\tparam1: value1,\r\nparam2 : value2\r\n}<\/pre>\nLearn more: How To Create Web To Lead \/ Web To Case Forms<\/a> and How To Handle Form Values On Event In LWC<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"