Passing Value from LWC to Parent Aura Component

In the last blog, we have focused on passing value to LWC from parent aura component. This blog is focused on passing value from LWC to parent Aura component.

Component Structure

The Salesforce docs says, To communicate from child to parent, dispatch an event. Lightning web components fire DOM events. An enclosing Aura component can listen for these events, just like an enclosing Lightning web component can. The enclosing Aura component can capture the event and handle it. 

In below example, HostLwc is parent aura component which host child lightning web component named lightningInputFieldInLwc.

Code

lightningInputFieldInLwc

The lightning web component has three files:-

• lightningInputFieldInLwc.html
• lightningInputFieldInLwc.js
• lightningInputFieldInLwc.js-meta.xml

lightningInputFieldInLwc.html

It has a lightning input field of type number with an onchange method.

<template>
  <lightning-input
    label="Input in Lwc"
    onchange={handleChange}
  ></lightning-input>
</template>

lightningInputFieldInLwc.js

The js file has handleChange method which fetch the lightning input field value using event.target.value and fires an custom event named valuechange which will be listen by parent component with values using detail attribute of custom event.

import { LightningElement } from "lwc";

export default class LightningInputFieldInLwc extends LightningElement {
  handleChange(event) {
    const value = event.target.value;
    const valueChangeEvent = new CustomEvent("valuechange", {
      detail: { value }
    });
    // Fire the custom event
    this.dispatchEvent(valueChangeEvent);
  }
}

lightningInputFieldInLwc.js-meta.xml

It has not been exposed to be used in Lightning App Builder as i am going to call it in parent aura component.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="lightningInputFieldInLwc">
    <apiVersion>46.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

HostLwc

Generally, Any aura component has 8 files in its bundle but we have used two of them. They are:-

• HostLwc.cmp
• HostLwcController.js

HostLwc.cmp

This is component markup for the parent aura component which uses child lightning web component with event handler starting from “on” i.e. onvaluechange. It also has an attribute to store the value and show it on UI.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="inputValue" type="String"/>
    <Lightning:card>
        <c:lightningInputFieldInLwc onvaluechange="{!c.getValueFromLwc}"/><br/>
        The value from Lwc is :- {!v.inputValue}
    </Lightning:card>
</aura:component>

HostLwcController.js

The controller has method which gets fired whenever the custom events get fired from lightning web component. it then fetches the value from event using event.getParam(‘value’). Use the same variable name you have used in lightning web component to pass the value using detail attribute of custom event.

({
	getValueFromLwc : function(component, event, helper) {
		component.set("v.inputValue",event.getParam('value'));
	}
})

Demo(Passing value to Parent Aura Component)