7

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?

| improve this question | |
9

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>
| improve this answer | |
  • +1 was trying similar example and messed it up as I was using id instead of aura:id :D – Raul May 16 '19 at 13:08
  • 2
    @Raul - yes this switching continuously between aura and LWC can cause this :) – RedDevil May 16 '19 at 13:20
  • @RedDevil thanks for the answer. But if I want to simply read the property? Like: component.find("stackchild").myName... i try this but it returns 'undefined' – cloma May 16 '19 at 13:51
  • 1
    @CostanzoPioLoMele - LWC is one way data binding so nyways the value for it will come from parent only, why are you trying to access it from parent,if its a child specific value fire an event and handle it in aura component? – RedDevil May 16 '19 at 13:53
  • 1
    @CostanzoPioLoMele - then create a simple function in LWC which returns the value you want to and then access the value in aura component. the LWC component will access the component variables and will return the computed value for you – RedDevil May 16 '19 at 14:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.