How To Do It In Salesforce

Concepts or coding lessons of Salesforce that you can implement easily

LWC and Aura component Communication example

How to Communicate between LWC and Aura component ??? You are on right blog.

In this blog we are going to call LWC method from Aura component. Also we are dispatching event from LWC and capture into Aura component.

Note: We can add LWC into Aura component, but we CANNOT add Aura component into LWC.

1. Create LWC component : lwcaura 

Copy paste below code into lwcaura.html

<template>

    <div>

        I am inside LWC comp <br/>

        <lightning-button variant="brand" label="Dispatch Event" title="Dispatch Event" onclick={handleClick}></lightning-button>

    </div>

</template>

Copy paste below code into lwcaura.html

import { LightningElement, api } from 'lwc';

export default class Lwcaura extends LightningElement {

    @api

    childCmpMethod(message, page_no){

        console.log('Child Cmp method executed message- '+message);

        console.log(page_no);

    }

    handleClick(){

        const eve = new CustomEvent(

            "select",

            {

                detail : {

                    message : "From LWC COmponant"

                }

            }

            );

        this.dispatchEvent(eve);

        }

}

2. Create Aura component : auralwc 

Copy paste below code into auralwc.cmp

<aura:component>

    <lightning:card title="LWC-AURA demo" iconName="custom:custom23">

        <div>

            <c:lwcaura onselect="{!c.doHandle}" aura:id="childCmp"></c:lwcaura>

        </div><br/>

        <div>

            <lightning:button label="Call CHild method" variant="brand"

                onclick="{!c.callChild}"></lightning:button>

        </div>

    </lightning:card>

</aura:component>

Copy paste below code into auralwcController.js

({
    doHandle : function(component, event, helper) {
        alert('Event handled');
        const message = event.getParam('message');
        console.log('msg from LWC', message);
    },
    callChild : function(component, event){
        var childComp = component.find('childCmp');
        childComp.childCmpMethod('from aura','44');
    }
})

3. Create Lightning App : lwcApp 

Copy paste below code into it:

<aura:application extends="force:slds">

    <c:auralwc></c:auralwc>

</aura:application>


Open Developer console and open lwcApp.app. Click Preview button










Output is:









Click Dispatch Event button to call custom event in LWC.

Click Call Child Method button to call LWC method with parameters.

Thats It.

Enjoy! If you have any questions, comments etc. please feel free to let me know. As always, please feel free to get in touch me as I would be more than happy to assist you with any of your Salesforce development needs.


Subscribe blog for More updates !!! 


Read More: WhatsApp on Salesforce Integration in 5 Steps
                    Which Salesforce API Do I Use in Integration?
                    When To Use Salesforce REST API  
                   When To Use Salesforce SOAP API 
                   When To Use Salesforce Bulk API 


Latest Salesforce Interview Questions and Answers:

No comments:
Subscribe to: Posts (Atom)