function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
MikeyJamJamsMikeyJamJams 

How to retrieve a child LWC property from an Aura component?

Hey everyone. I'm very new to Lightning components, so I'm hoping this will be a relatively easy answer for the experts on here.  I have a very simple Lightning Web Component embedded inside a parent Aura Component. What I would like to do is be able to have my parent Aura Controller retrieve the property value from my child LWC, but I can't figure out how. 

For example, here is my simple LWC HTML file that returns Hello World. 
samplelwc.html
<template>
    <lightning-card  title="Sample LWC">
        <p class="slds-p-horizontal_small">My LWC variable is: {lwcVariable}</p>
    </lightning-card>
</template>
samplelwc.js
import { LightningElement, api } from 'lwc';

export default class Samplelwc extends LightningElement {
    @api lwcVariable = 'Hello World';
}

In my Aura Component, I would like to retrieve lwcVariable from my LWC controller, but I can't figure out how to do this.

Here is the Aura Compoent I have: 
sampleac.cmp
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <c:samplelwc aura:id="mylwc"/>
    <aura:attribute name="lwcVariable" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:card title="Sample Aura Component">
        <p class="slds-p-horizontal_small">The variable from my aura controller is: {!v.lwcVariable}</p>
    </lightning:card> 
</aura:component>
What I would like to do is have {!v.lwcVariable} pulled from my LWC, but I can't figure it out. Right now I'm hardcoding it with Hello World! as shown in my Aura Controller. I'm not sure how to have the component.set method pull the value from my lwcVariable property in my LWC Controller. 
sampleacController.js
({
    doInit : function(component, event, helper) {
        component.set("v.lwcVariable", "Hello World!");
    }
})
If any help is greatly appreciated. Thanks!

 
 
Saravana Bharathi 1Saravana Bharathi 1
Hi Mikey,

You can use custom event to pass value from lwc to aura component.

you can pass it as a variable in LWC from aura component.


sampleac.cmp
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="lwcVariablepass" type="String"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<c:samplelwc aura:id="mylwc" lwcVariable="{!v.lwcVariablepass}"/>
<lightning:card title="Sample Aura Component">
<p class="slds-p-horizontal_small">The variable from my aura controller is: {!v.lwcVariablepass}</p>
</lightning:card>
</aura:component>

sampleacController.js
({ doInit : function(component, event, helper)
{
component.set("v.lwcVariablepass", "Hello World!");
}
})

In subsequent controller method, you can set the value by using component.set("v.lwcVariablepass","dynamic variable");

You can try this, and mark it as solution, if it solves.

Thanks
 
MikeyJamJamsMikeyJamJams
Hi Saravana, 

This is close, but I'm hoping to have the logic go the other way around, where I can pass a value from my LWC to my Aura Component. 

In your example, I'd like to have {!v.lwcVariablepass} replaced with the value stored in lwcVariable in my LWC. 

In my Aura controller, is there a way to reference lwcVariable from my LWC Controller? 
sampleacController.js
({
    doInit : function(component, event, helper) {
        component.set("v.lwcVariable", <lwcVariable from samplelwc.js>);
    }
})

In the Aura controller above, I'd love to set instances "v.lwcVariable" equal to the lwcVariable property in the LWC controller below 
samplelwc.js
import { LightningElement, api } from 'lwc';

export default class Samplelwc extends LightningElement {
    @api lwcVariable = 'Hello World';
}
Thanks!
Mikey