Handling Events of LWC in Aura Component

In this post, we will implement the functionality of Handling Events of LWC in Aura Component. We can use the Lightning Web Components inside Aura Component but vice versa is not possible. Meaning, we cannot use Aura Component inside Lightning Web Components.

We can use events to communicate between the Aura Component and Lighting Web Components if both components belongs to same hierarchy. If both the components are independent, we have to use either the Publish Subscribe model or Lightning Message Service which we will cover in later posts.

Implementation

In this implementation, we will put Lightning Web Component inside Aura Component. When user clicks on any Contact name listed in Lightning Web Component, event will be fired which will be captured by Aura Component.

Create a Lightning Web Component lwcCmp and add the markup to loop through the lstContacts using for:each. Add the onclick event that will call selectContact method.

lwcCmp.html

<template>
    <h1 class="slds-text-heading_small">This is Lightning Web Component</h1>
 
    <div class="slds-p-around_medium">
        <p>Click on Contact Name to select:</p>

        <!--For each loop to display Contact from the list.-->
        <template for:each={lstContacts} for:item="contact">
            <p style="cursor:pointer;padding:5px 0px;font-weight:bold" key={contact} onclick={selectContact}>
                {contact}
            </p>
        </template>
    </div>
</template>

Create lstContacts array property in JS Controller and add some names in the array. Once we click on Contact name, selectContact method will be called which will fire the event selectcontactevent. We are passing JSON objContact with attribute contactName which will have the Contact name.

lwcCmp.js

import { LightningElement, track } from 'lwc';
 
export default class LwcCmp extends LightningElement {
 
    // Default list of Contacts.
    @track lstContacts = ["Niks Developer", "Cristiano Ronaldo", "Lionel Messi", "Sachin Tendulkar"];
 
    // To fire the event after clicking on Contact name from the list.
    selectContact(event){
        const strSelectedContact = event.target.textContent;
        var objContact  = {
            contactName : strSelectedContact
        };
        const evtSelectContact = new CustomEvent('selectcontactevent', {detail : objContact});
        this.dispatchEvent(evtSelectContact);
    }
     
}

Create Aura Component AuraCmp which will contain the markup to show the Selected Contact. Include the lwcCmp in AuraCmp. To add the event handler in AuraCmp, add the attribute onselectcontactevent inside the lwcCmp tag, and assign the controller action to it. The name of the attribute should be concatenated string of “on” and the name of event that is fired in lwcCmp. Hence, the attribute name is onselectcontactevent.

AuraCmp.cmp

<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="selectedContact" type="String" />

    <lightning:card class="slds-p-around_xx-small custom-height" title="This is Aura Component">

        <!-- To display the selected Contact.-->
        <div class="slds-m-top_x-medium slds-p-around_medium">
            Selected Contact:  
            <p style="color:green;display:inline;font-weight:bold">{!v.selectedContact}</p>
        </div>

        <!-- Child Component to display list of Contacts.  -->
        <!-- We have added the attribute onselectcontactevent to listen to the event. -->
        <div class="slds-m-top_x-medium slds-p-around_medium">
            <c:lwcCmp onselectcontactevent="{!c.contactSelected}" />
        </div>
    </lightning:card>

</aura:component>

Once the event is captured by AuraCmp, contactSelected method will be called that will get the contact name from event parameter and set the Contact name in selectedContact attribute.

AuraCmpController.js

({
    // Event Handler
    contactSelected : function(component, event, helper) {
        component.set("v.selectedContact", event.getParam('contactName'));
    }
})