Skip to main content

Communicate with Events inLightning web components (LWC) - Salesforce Developers

There are mainly 3 approaches for communication between the Lightning components using events.
  1. Communication using Method in LWC ( Parent to Child )
  2. Custom Event Communication in Lightning Web Component (Child to Parent )
  3. Publish Subscriber model in Lightning Web Component ( Two components which doesn't have a direct relation )
1. Communication using Method in LWC ( Parent to Child )
we can call the method of Child Component from the Parent Component with the help of JavaScript Methods.
LWC have used @api decorator to make the children properties public available so parent can be able to call it directly using JavaScript API.
For example create one public variable and method (which we need to access in parent component) in ChildComponent with @api decorator like below:

ChildComponent:

import { LightningElementapi } from 'lwc';

export default class HelloWorld extends LightningElement {
    @api name;
    @api message;

    @api upperCaseMessage(strString) {
     this.Message = strString.toUpperCase();
}
}

<template>
    Message Will Come here from Parent Component :- {Message}
</template>

ParentComponent:

<template>
  <lightning-layout-item flexibility="auto" padding="around-small"  >
    <lightning-input label="Enter the Message" onchange={handleChangeEvent}>
</lightning-input>
</lightning-layout-item>
<lightning-card title="childData">
   <c-lwc-hello-world></c-lwc-hello-world><!--childComponent Name-->
</lightning-card>
</template>

import { LightningElement } from 'lwc';


export default class MyComponent extends LightningElement {
handleChangeEvent(event){
  this.template.querySelector('c-lwc-hello-world').changeMessage(event.target.value);
 }
}

2. Custom Event Communication in Lightning Web Component (Child to Parent )
Custom Event is used to make the communication from Child Component to Parent Component.
In LWC we can create and dispatch the custom event.

Create and Dispatch an Event
Create Event : We can use the customEvent() constructor to create an event. In constructor we need to pass custom event name and detail of the event.
new customEvent(eventName, detail);

Dispatch Event : We have to dispatch an event at with EventTarget.dispatchEvent() method.
  this.dispatchEvent(new customEvent(eventName, detail);

Handle an Event : There are two ways to listen to an event 
  • Declarative via html markup : We need to add “on” prefix in the event name in Parent Component during calling of Child Component for Declaratively event listener.
ParentComponent:
    <template>
          <c-child-component oneventName={listenerHandler}></c-child-component >
    </template>
  • JavaScript using addEventListener method : We can explicitly attach a listener by using the addEventListner method in the parent component.
ChildComponent:
this.template.addEventListener('eventName', this.handleNotification.bind(this));

For More Details And Examples on this please visit : EventDispatch/Listner 

3. Publish Subscriber model in Lightning Web Component ( Two components which doesn't have a direct relation )

Llibrary called pubsub to achieve the communication between two components which doesn't have a direct relation to each other. An event is subscribed by a component and handled when another component which publishes the event within the same scope.

Please use this link to get the pub sub utility code. Pubsub module support below three method
  1. Register 
  2. UnRegister
  3. Fire
Example :

import { LightningElementapiwire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
import {
    registerListener,
    unregisterListener,
    unregisterAllListeners,
    fireEvent
from 'c/pubsub';

export default class AuraPubsub extends LightningElement {
    @wire(CurrentPageReferencepageRef;

    connectedCallback() {
        this.dispatchEvent(new CustomEvent('ready'));
    }

    @api
    registerListener(eventNamecallback) {
        registerListener(eventNamecallbackthis);
    }

    @api
    unregisterListener(eventNamecallback) {
        unregisterListener(eventNamecallbackthis);
    }

    @api
    unregisterAllListeners() {
        unregisterAllListeners(this);
    }

    @api
    fireEvent(eventNamedata) {
        fireEvent(this.pageRefeventNamedata);
    }
}

Fire the event from other Component. In that js file, We need to trigger the event with name and value. Remember, we also need to send the page reference attribute as current page reference for successful communication

import {  fireEvent } from 'c/pubsub';
import { CurrentPageReference } from 'lightning/navigation';
export default class OtherComponent extends LightningElement {
     @track myMessage;
     @wire(CurrentPageReferencepageRef;

     sendMessage() {
          fireEvent(this.pageRef'messageFromSpace'this.myMessage);
     }
}

Comments

Popular posts from this blog

Platform Developer I Certification Maintenance (Winter '23)

 Maintain Your Platform Developer I Certification for Winter ’23 1. Field update actions have changed in API Version 54.0. Which record-triggered flows do field update actions now execute? Answer: Before-Save after After-Save 2. Which Apex class is used to determine the hostnames for the domains that Salesforce hosts for your org? Answer: System.DomainCreator 3. Which modules can be used for notifications in a Lightning web component instead of native APIs? Answer: LightningAlert, LightningConfirm, and LightningPrompt 4. What determines an org’s “shape” in Salesforce? Answer: Features, settings, edition, limits, and licenses 5. Which lightning-modal-* component is required to create a modal? Answer: Body 6. How do you call an invocable action from Apex code? Answer: Reference Invocable.Action Get Hands-On With Apex Assertions 1. Create Two Apex class: Copy and Paste below codes (A.) TestFactory @isTest public class TestFactory {    public static Account getAccount(String accountName, B

Custom Table In LWC

I'm assuming you've Basic understanding of Lightning Web Component, I'll be explaining you the syntax that will be generic. HTML: < template > <!-- Header Part -->      < lightning-card   title = "Custom Data table in Lightning Web Components" >          < div   class = "slds-grid slds-gutters" >              < div   class = "slds-col" >                  < span ></ span >              </ div >              < div   class = "slds-col" >                  < span > <!--A Button For extra feature-->                      < lightning-button   label = "Show Selected Contacts"   onclick = {showContacts}   style = "margin-left: 40%"   variant = "brand" > </ lightning-button >                  </ span >              </ div >          </ div >< br />

LWC js-meta.xml Configuration File Tags

Each Lightning web component folder must include a configuration file named <componentName>.js-meta.xml. The configuration file defines the metadata values for the component, including the design configuration for the Lightning App Builder and Community Builder. Some Standard Key metadata values: apiVersion : A double value that binds the component to a Salesforce API version. isExposed : If isExposed is false, the component is not exposed to Lightning App Builder or Community Builder. To allow the component to be used in Lightning App Builder or Community Builder, set isExposed to true and define at least one <target>, which is a type of Lightning page. Some Standard Optional metadata values: description : A short description of the component, usually a single sentence. masterLabel : The title of the component. Appears in list views, like the list of Lightning Components in Setup, and in the Lightning App Builder and in Community Builder. targets : Specifies wher

Translate