#4: Communicate with Events in LWC | Learn Lightning Web Component Development | LWC Stack Salesforce

Kapil August 20, 2023


Agenda

  • What is an Event?
  • Create and Dispatch Event
  • Parent to Child Communication
  • Child to Parent Communication

What is an Event

Events are used in LWC for components communication. Or in simple words an event a way to tell parent/child component that something happened. Also you can pass data with this indication.

Events can communicate through Parent component to it’s Child… and vice versa.

Parent to Child

Let’s learn about Parent to Child communication. In Lightning Web Component you can communicate between parent to child component using two ways:

  1. @api properties
  2. @api methods


@api properties

To pass the data from Parent to Child using public properties you can make a component property public by prefacing it with the @api decorator. In below example I am passing data from Parent to Child, to do that I have added @api decorator in my child component.

And on the other hand in my parent component I have added that child component and passed the data with the same name of attribute.

ChildComponent.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
    <lightning-card title="I am child with API property " icon-name="utility:user">
        <div class="slds-var-m-around_medium">
            <div style="padding:10px">
                <p>{percentage}%</p><br />
              
                <div style={style}>
                    .<br/>
                </div>
            </div>
        </div>
    </lightning-card>
</template>


ChildComponent.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {

    @api percentage;
    
    get style(){
        return `background-color:red; min-height:50px; width: ${this.percentage}%; min-width:10px; border:1px solid black`;
    }
}


Parent.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
    <lightning-card title="I am Parent with API property " icon-name="utility:user">
        <div class="slds-var-m-around_medium">
            <div style="padding:10px">
               <lightning-input type="number" value={percentage} onchange={handleonchange}></lightning-input>
               <br/>
               <c-child-component percentage={percentage}></c-child-component>
            </div>
        </div>
    </lightning-card>
</template>


Parent.js
1
2
3
4
5
6
7
8
import { LightningElement } from 'lwc';

export default class Parent extends LightningElement {
    percentage=20;
    handleonchange(event){
        this.percentage = event.target.value;
    }
}




@api function

To communicate using api functions you have to add @api decorator in your child component function. And then using template.querySelector you will be able to call it from your parent component.

ChildComponent.html
1
2
3
4
5
6
7
8
9
<template>
    <lightning-card title="I am child with API function " icon-name="utility:user">
        <div class="slds-var-m-around_medium">
            <div style="padding:10px">
                <p>{timestamp}</p><br />
            </div>
        </div>
    </lightning-card>
</template>

ChildComponent.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {

    timestamp = new Date();

    @api
    refresh(){
        this.timestamp = new Date();
    }
}


Parent.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<template>
    <lightning-card title="I am Parent with API function " icon-name="utility:user">
        <div class="slds-var-m-around_medium">
            <div style="padding:10px">
               <lightning-button label="Refresh" onclick={handleClick}></lightning-button>
               <br/>
               <c-child-component></c-child-component>
            </div>
        </div>
    </lightning-card>
</template>

Parent.js
1
2
3
4
5
6
7
import { LightningElement } from 'lwc';

export default class Parent extends LightningElement {
    handleClick(){
        this.template.querySelector('c-child-component').refresh();
    }
}




Child to Parent

To communicate from child to parent you can use customEvent() constructor. With LWC we can create and dispatch the custom event.

Child.html
1
2
3
4
5
6
7
8
9
<template>
    <lightning-card title="I am communicating " icon-name="utility:user">
        <div class="slds-var-m-around_medium">
           <lightning-button label="Count++" onclick={handleOnClick}>
               
           </lightning-button>
        </div>
    </lightning-card>
</template>

Child.js
1
2
3
4
5
6
7
import { LightningElement } from 'lwc';

export default class ChildComponentCommunication extends LightningElement {
  handleOnClick(){
      this.dispatchEvent(new CustomEvent('increasecount'));
  }
}

Parent.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<template>
    <lightning-card title="I am Listening" icon-name="utility:user">
        <div class="slds-var-m-around_medium">
        Count of Clicks : {count}
        <c-child-Component-Communication onincreasecount={handleEventChange}>

        </c-child-Component-Communication>
        </div>
    </lightning-card>
</template>

Parent.js
1
2
3
4
5
6
7
8
import { LightningElement } from 'lwc';

export default class ParentComponentCommunication extends LightningElement {
    count =1;
    handleEventChange(){
        this.count = this.count + 1;
    }
}



Checkout the Crash Course Below



 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)

Tags:

Post a Comment

0 Comments