Pass value to LWC from Parent Aura Component

Lightning web component can be used inside an aura component in Salesforce whereas Aura Component cannot be used in Lightning Web component. The goal is to pass value to LWC from parent aura component.

Component Structure

We have two components:-

lightningCardInLwc :- This is a Lightning web component
HostLwc :- This is an aura Component

HostLwc is the parent component of lightningCardInLwc which is a lightning web component.

lightningCardInLwc

The lightning web component has three file in its bundle. They are:-

lightningCardInLwc.html
lightningCardInLwc.js
lightningCardInLwc.js-meta.xml

lightningCardInLwc.html

The html file has lightning-card with an icon and public property CardTitle.

<template>
  <lightning-card>
    <h3 slot="title">
      <lightning-icon
        icon-name="utility:connected_apps"
        size="small"
      ></lightning-icon>
      The value from Aura is:- {CardTitle}
    </h3>
  </lightning-card>
</template>

lightningCardInLwc.js

We have used api decorator to publicly expose the property named CardTitle. This value will be set by Aura Component.

import { LightningElement, api } from "lwc";

export default class LightningCardInLwc extends LightningElement {
  @api CardTitle;
}

lightningCardInLwc.js-meta.xml

The component has not been exposed as we are going to use it inside Aura Component. It also tells the component about the api version to be used.

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

Now, We will create a Aura component where we will wrap the Lightning web component inside it and pass the value.

HostLwc

The Aura component bundle consist of 8 files. We will need just 1 of them:-

HostLwc.cmp

HostLwc.cmp

While calling lightning web component inside the aura component, we are passing the value of public property named CardTitle.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <c:lightningCardInLwc CardTitle="lwc card"/>
</aura:component>

Demo(Pass value to LWC)

The below screenshot reflect the communication down the hierarchy i.e. Pass value to LWC from Parent Aura Component.

You can compose Aura components from Lightning web components, but not the other way around. To communicate down the hierarchy, parents set properties on children.