Brand

Salesforce Menu

Salesforce Lightning

Salesforce LWC

Events- Child to Parent Navigation

Data must be passed up using Events. Events are the activity or the action that fires from the child component and listens to the parent.

LWC creates the Events using the Event or CustomEvent standard JavaScript classes. The CustomEvent class will allow you to store information in its detail property and then transmit those details(information) to the listeners of the event. Then, you can make an event target dispatch to invoking the dispatchEvent standard method.

Let’s create a parentcomponent who will received the data from child component

paretLWC.html
<template>
   This is the Parent Component let's Click on below link and get the data from child component<br/>
   Here you will receive the Data from Chid: Hello {salesforcedriller}
   <c-child-l-w-c onchild={haldleChild}></c-child-l-w-c>
</template>

As you can see above component has the custom event initialization onchild={handlechild}.This handlechild method will be triggered by child component.

parentLWC.js
import { LightningElement,track } from 'lwc';
export default class ParentLWC extends LightningElement {
   @track salesforcedriller;
   haldleChild(event){
       this.salesfrocedriller=event.detail.key1 +' '+event.detail.key2;
   }
}

Let’s create the child component to fire the event to share the data.

childLWC.html
<template>
  <a onclick={clickbutton}><br/>Hello please click me to pass data to parent component</a>
</template>

childLWC.js
import { LightningElement, api } from 'lwc';
export default class ChildLWC extends LightningElement {
   clickbutton(){
       const event = new CustomEvent('child', {
       // detail contains only primitives
       detail: {key1:"Salesforce ",key2:"Driller"}
       });
       this.dispatchEvent(event);
   }
}

Explanation

As you can see parent component has the custom event initialization onchild={handlechild}.This handlechild method will be triggered by child component.

As you can see in the above example we have used the details property to store the data.To create a custom event we have to use the CustomEvent class.
As you can see we have used the first parameter as child which is initialized in the parent component onchild.

Atlast we just have to dispatch the event using dispatchEvent method.

Output

Event propagation

Event propagation means launching a series of events in the web browser. This can be the top to bottom and bottom to top. Event propagation defines how to travel in the DOM tree.

There are two types of propagation that manage the Lightning component event handling.

  • Bubble: Bubble event allow the event to fire upward direction
  • Composed: composed determines whether the event should ignore the shadow DOM or not.

Syntax:

this.dispatchEvent(new CustomEvent(‘clickevevent’, { bubbles: false , composed : false }));

Let’s explore how the event flow in LWC

When the bubble is false and composed is false

This is the default behavior of the LWC event flow. if we do not define the event propagation it will follow this. Both the value false determine that the event will not fire upward and it will not cross the shadow dom. We can capture these events by defining the event handler to a component that fires the event.

Syntax:

this.dispatchEvent(new CustomEvent(‘clickevevent’));

parentLWC.html
<template>
   This is the Parent Component let's Click on below link and get the data from child component<br/>
   Here you will receive the Data from Child: Hello {salesforcedriller}
   <c-child-l-w-c onchild={haldleChild}></c-child-l-w-c>
</template>

As you can see above component has the custom event initialization onchild={handlechild}. This handlechild method will be triggered by the child component.

parentLWC.js
import { LightningElement,track } from 'lwc';
export default class ParentLWC extends LightningElement {
   @track salesforcedriller;
   haldleChild(event){
       this.salesfrocedriller=event.detail.key1 +' '+event.detail.key2;
   }
}

Let’s create the child component to fire the event to share the data.

childLWC.html
<template>
   <a onclick={clickbutton}>
Hello please click me to pass data to parent component</a>
</template>

childLWC.js
import { LightningElement, api } from 'lwc';
export default class ChildLWC extends LightningElement {
   clickbutton(){
       const event = new CustomEvent('child', {
       // detail contains only primitives
       detail: {key1:"Salesforce ",key2:"Driller"}
       });
       this.dispatchEvent(event);
   }
}

As you can see in the above example we have used the details property to store the data. To create a custom event we have to use the CustomEvent class.

As you can see we have used the first parameter as a child which is initialized in the parent component onchild.

At last, we just have to dispatch the event using dispatchEvent method.

Output

Explanation

As you can see we have used thedetails property to store the data. To create a custom event we have to use the CustomEvent class.

As you can see we have used the first parameter as a child which is initialized in the parent component onchild.

At last, we just have to dispatch the event using dispatchEvent method.

When the bubble is true and composed is false

The bubble is true and composed is false determines the event propagation will go upward within the current component. and it will not cross the boundary of the current component.

Syntax:

this.dispatchEvent(new CustomEvent(‘clickevevent’),{ bubbles: true , composed : false }));

childLWC.html
<template>
   {salesforcedriller}
   <div onbtnclick={handlesalesforcedrillerClick}>
   <lightning-button variant="brand" label="Salesforce Driller" title="Salesforce Driller" onclick={handleClick} class="slds-m-left_x-small">
</template>

As you can see in the template onbtnclick is the custom event and will be managed by the handleClick handler.

import { LightningElement, track } from 'lwc';
export default class Child extends LightningElement {
   @track salesforcedriller;
   handleClick(event){
   this.template.querySelector('div').dispatchEvent(new CustomEvent('btnclick', { bubbles: true , composed : false }));
   }

   handlesalesforcedrillerClick (event)
   {
       this.salesforcedriller = 'Event handled in Child template only. it is not crossing the boundry';
   }
}

The dispatched event will fire the current component event handler handlesalesforcedrillerClick.

Output

When the bubble is true and composed is true

The statement itself defines that event can bubble upward and even it can cross the boundary. and will continue to the root.

ParentLWC.html
<template>
   <h1>{salesforcedriller}</h1>
   <c-child-l-w-c></c-child-l-w-c>
</template>

ParentLWC.js
import { LightningElement, track, api } from 'lwc';
export default class App extends LightningElement {
   @track salesforcedriller;
   constructor(){
       super();
       this.template.addEventListener('btnclick', this.handleClick.bind(this));
   }

   handleClick(event){
       this.salesforcedriller = 'Child component button click fired in the child conent';
   }
}

childLWC.html
<template>
   <lightning-button variant="brand" label="Salesforce driller" title="Salesforce driller" onclick={handleClick} class="slds-m-left_x-small">
   </lightning-button>
</template>

childLWC.js
import { LightningElement, track, api } from 'lwc';

export default class Child extends LightningElement {
   handleClick(event){
       this.dispatchEvent(new CustomEvent('btnclick', { bubbles: true , composed : true }));
   }
}

Child controller dispatch the event and this event(btnclick) has been declared in the parent component.

Output

When the bubble is false and composed is false

Lightning web components don’t use this configuration.<./p>

Previous
Next
Subscribe Now