How to call a child LWC method from a parent Aura cmp?

Question

I have an aura cmp(parent) that acts as a container for 2 LWC's(children). I am trying to call the handleAddToDashboard() method in the stockTracker_Dashboard LWC from the StockTrackerContainer aura cmp. I tried getting the child LWC using the aura:id, but I am getting an error. The error says "no object available" and I don't see anything helpful in the stack trace.

How can I call the LWC(child) js method imperatively from the Aura(parent) js method? Code below:

stockTracker_Dashboard LWC (child):

JS:

import { LightningElement, track, api } from 'lwc';

export default class StockTracker_Dashboard extends LightningElement {
    @api testValues; //@api allows parent aura cmp to access and set testValue


    @api handleAddToDashboard(stockSymbol) {
        this.testValues += stockSymbol; 
        console.log('this.testValues: ' + this.testValues);
    }
}

Cmp:

<template>
    <div>Div in dashboard</div>
</template>

StockTrackerContainer aura cmp (parent):

JS:

({
    getValueFromLwc : function(component, event, helper) {
        let dashboardCmp = component.find("dashboardCmp");
        console.log('dashboardCmp: ' + dashboardCmp);
        dashboardCmp.handleAddToDashboard(event.getParam('selectedSymbol')); //<-ERROR HERE
    }
})

CMP:

<aura:component implements="force:appHostable">
  
    <aura:attribute name="selectedSymbolValue" type="String"/>
    <div>selectedSymbolValue: {!v.selectedSymbolValue}</div>

    <div class="slds-grid slds-gutters">
        <div style="background-color: white; height: 500px; margin-left: 10px; margin-right: 10px;" class="slds-col slds-size_1-of-2">
          <span class="slds-align_absolute-center">Search</span>

          <c:stockTracker_Search onaddtodashboard="{!c.getValueFromLwc}"></c:stockTracker_Search> <br /> <br />
        </div>

        <div style="background-color: white; height: 500px; margin-left: 10px; margin-right: 10px; flex: auto"  class="slds-col slds-size_1-of-2">
          <span class="slds-align_absolute-center">Dashboard</span>


          <!--DASHBOARD LWC (LMS)-->
          <c:stockTracker_Dashboard aura:id="dashboardCmp" testValue="hello world"></c:stockTracker_Dashboard>
        </div>
      </div>
</aura:component>   

Answer 1

When working with LWCs, you should only be setting public properties via the parent. The LWC shouldn't be modifying any of its own public properties.

See also: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_data_flow

What does this actually mean?

In your case, your Aura Component should maintain the state of the of you testValue. When the testValue changes in your aura component, the stockTracker_Dashboard will rerender with the new value. In other words, don't call a method on the LWC, just change the data in your Aura Component.

Answer 2

After replacing let dashboardCmp = component.find("dashboardCmp") with let dashboardCmp = component.find("dashboardCmp").getElement(); this code worked.