3 types of Event Communication

·       Parent to child

·       Child to Parent

·       Unrelated components

 

 Parent to child:

Note: Use @api decorator  in child components

Passing message from parent to child:

 

ChildComp

<template>

    Message will come here from Parent component :{message}

</template>

Js:

import { LightningElement,track,api } from 'lwc';

 

export default class ChildComp extends LightningElement {

  @track message;

 

  @api

  changeMessage(strString)

  {

      this.message=strString.toUpperCase();

  }

}

 

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="childComp">

    <apiVersion>46.0</apiVersion>

    <isExposed>false</isExposed>

</LightningComponentBundle>

 

 

Parent Component:

 

<template>

    <lightning-card title="Parent to Child Demo">

        <lightning-layout>

            <lightning-layout-item flexibility="auto" padding="around-small">

                <lightning-input label="Enter the message" onchange={handleChangeEvent}></lightning-input>

 

            </lightning-layout-item>    

            <lightning-layout-item flexibility="auto" padding="around-small">

                    <c-child-comp></c-child-comp>

            </lightning-layout-item>

 

        </lightning-layout>

 

    </lightning-card>

</template>

 

Js:

 

import { LightningElement } from 'lwc';

 

export default class ParentComp extends LightningElement {

    handleChangeEvent(event)

    {

        this.template.querySelector('c-child-comp').changeMessage(event.target.value);

    }

 

}

  

Xml:

 

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="parentComp">

    <apiVersion>46.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

 

Child to Parent:

·       Child component will create and Fire the event

·       Parent component will handle the event

Handling the event in two ways:

·       Declarative via html Markup

·       JavaScript using add Event Listener

 

  Declarative via html Markup

 Creating Event in childComponent

const selectEvent=new CustomEvent('mycustomevent',{detail:name});

 

Dispatch/fire Event  in child component:

        this.dispatchEvent(selectEvent);

 

Handling the event in Parent side using html Markup

<c-child-component2 onmycustomevent={handleCustomEvent}></c-child-component2>

 

 

Here mycustomevent is eventName

 childComponent2

 

<template>

    <lightning-card title="Child Component">

        <div class="slds-m-around_medium">

            <lightning-input name="textVal" label="Enter Text" onchange={handleChange}></lightning-input>

        </div>

 

    </lightning-card>

</template>

 

Js

import { LightningElement } from 'lwc';

 

export default class ChildComponent2 extends LightningElement {

    handleChange(event)

    {

        const name=event.target.value;

        const selectEvent=new CustomEvent('mycustomevent',{detail:name});

        this.dispatchEvent(selectEvent);

    }

}

 

 Xml:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="childComponent2">

    <apiVersion>46.0</apiVersion>

    <isExposed>false</isExposed>

</LightningComponentBundle>

 

 ParentComponent2:

<template>

    <div class="slds-m-around_medium">

        Value from Child: {msg}

        <c-child-component2 onmycustomevent={handleCustomEvent}></c-child-component2>

 

    </div>

</template>

 

import { LightningElement,track } from 'lwc';

 

export default class ParentComponent2 extends LightningElement {

    @track msg;

    handleCustomEvent(event)

    {

        this.msg=event.detail;

    }

}

 

 

xml:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="parentComponent2">

    <apiVersion>46.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>

 

Push Parent component to LightningPage

 

Using AddEventListner Method:

childComponent3

<template>

    <lightning-card title="Child Component">

        <div class="slds-m-around_medium">

            <lightning-input name="textVal" label="Enter Text" onchange={handleChange}></lightning-input>

        </div>

 

    </lightning-card>

</template>

 

 

Js:

import { LightningElement } from 'lwc';

 

export default class ChildComponent2 extends LightningElement {

    handleChange(event)

    {

        const name=event.target.value;

        const selectEvent=new CustomEvent('mycustomevent',{detail:name,bubbles:true});

        this.dispatchEvent(selectEvent);

    }

}

 

Xml:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="childComponent2">

    <apiVersion>46.0</apiVersion>

    <isExposed>false</isExposed>

</LightningComponentBundle>

 

 

ParentComponent3:

 

<template>

    <div class="slds-m-around_medium">

        Value from Child: {msg}

        <c-child-component3></c-child-component2>

 

    </div>

</template>

 

Js:

import { LightningElement,track } from 'lwc';

 

export default class ParentComponent2 extends LightningElement {

    @track msg;

   constructor()

   {

       super();

       this.template.addEventListener('mycustomevent',this.handleCustomEvent.bind(this));

   }

    handleCustomEvent(event)

    {

        this.msg=event.detail;

    }

}

 

 

 

Xml:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="parentComponent2">

    <apiVersion>46.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>

 

 

  Pub sub Model in Lightning Web Component:

Two components are not related to each other then we need to go for pub sub model. Its similar to Application Event in Aura Components.

·       Need to use pubsub.js

·       Publisher event takes 3 parameters: import these parameters  pageRefrence,event Name,eventdetail from pubsub.js

·       Subscriber component : Import registerListner,unregisterAllListner from pubsub.js file

 

PalettsPublisher:

<template>

    <lightning-card title="Palette Publisher">

        <lightning-layout>

            <lightning-layout-item flexibility="auto" padding="around-small">

                <lightning-combobox label="Color" value={color} options={colorCodeOptions} onchange={changeColor}></lightning-combobox>

                <div class="slds-p-top_small">

                    <lightning-button label="change color" variant="brand" onclick={handleChangeColor}></lightning-button>

 

                </div>

            </lightning-layout-item>

 

        </lightning-layout>

 

    </lightning-card>

</template>

 

 

Js:

 

import { LightningElement,track,wire} from 'lwc';

import {fireEvent} from 'c/pubsub';

import {CurrentPageReference} from 'lightning/navigation';

 

export default class PalettePublisher extends LightningElement {

    @track color;

    @wire(CurrentPageReference) pageRef;

    colorCodeOptions=[

        {label:"Green",value:"green"},

        {label:"Red",value:"red"},

        {label:"Yellow",value:"yellow"},

        {label:"Blue",value:"blue"}

    ];

    changeColor(event)

    {

       this.color= event.target.value;

    }

    handleChangeColor()

    {

        console.log("color ->"+this.color);

        fireEvent(this.pageRef,"changedColor",this.color);

    }

}

 

Xml:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="palettePublisher">

    <apiVersion>46.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>

Canvas:

 

<template>

    <lightning-card title="Canvas Subscriber">

        <lightning-layout-item flexibility="grow">

            <div class="templateBodyClass" style={colorStyle}></div>

 

        </lightning-layout-item>

 

    </lightning-card>

    

</template>

 

 

Js:

import { LightningElement,track,wire } from 'lwc';

import {registerListener,unregisterAllListeners} from 'c/pubsub';

import {CurrentPageReference} from 'lightning/navigation';

 

export default class CanvasSubscriber extends LightningElement {

   @track color;

   @wire(CurrentPageReference) pageRef;

 

   connectedCallback()

   {

       registerListener("changedColor",this.handleChangedColor,this);

   }

   disconnectedCallback()

   {

       unregisterAllListeners(this);

   }

   handleChangedColor(colorCode)

   {

       console.log("Color -->"+colorCode);

       this.color=colorCode;

   }

    get colorStyle(){

        return `background-color:${this.color}`;

    }

}

 

css

.templateBodyClass{

    height:80px;

}