How to access child Web Component property from parent Aura Component controller?

Question

I have an issue working on integration between Aura Component and Lightning Web Component. I have one nested Lightning Web Component in an Lightning Component.

When I try to access the child I get this exception: Cannot read property 'validity' of null

This is how I declare the Lightning Web Component and how I try to access his 'invalid' property.

console.log( 'RENDER: ' + document.querySelector("[data-name='try']").validity() );

<c:ita_ifm_lwc001_input data-name="prova" label="prova" />

And this is the Lightning Web Component js lines where I provide the method to be called by the parent.

@api invalid = false;

@api validity(){
    return this.invalid;
}

Is there someone that faced this issue before? Is it possible to read child Web Component property from parent Aura Component?

Answer 1

Is it possible to read child Web Component property from parent Aura Component?

Yes you can. you are trying to call a method or a property in your LWC component from aura component the LWC way but it should be the aura way.

Simple Demonstration:

Parent Aura component markup

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
<p>Main Container</p>  
<lightning:button variant="base" label="Base" title="Base action" onclick="{! c.handleClick }"/>  
<c:stackTest aura:id="stackchild"></c:stackTest>
</aura:component>   

Parent controller:

({
    handleClick : function(component, event, helper) {
    alert("Hello from container" + component.find("stackchild"));
    component.find("stackchild").raisealert();
    }
})

Child LWC Component markup:

<template>
<p>Hello: {myName}</p>
   </template>

Child component controller file:

import { LightningElement,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class StackTest extends LightningElement {
  @api myName = 'Hello'; 

  @api  raisealert(){
   alert("Hello from child");

  }
}

The key in this example is i am tagging an aura:id to LWC component when i include it in aura component and then using component.find to call its public properties and methods(@Api annotated)

<c:stackTest aura:id="stackchild"></c:stackTest>