firing a method in Lightning web component from Parent Aura Component

In lightning web component, We can fire a method defined in child lightning web component from parent lightning web component. What if a lightning web component is called in parent aura component? How to fire a method in Lightning web component from aura component where aura component is the parent?

The answers is yes. You can fire a method in Lightning web component from parent aura component by assigning an aura:id while calling the component.

Define a method on Lightning Web Component

Let’s create a lightning web component named childLwc and define a method in its js file. The component bundle in Lightning web component has three file:-

• childLwc.html
• childLwc.js
• childLwc.js-meta.xml

childLwc.html

The html file does have a property named number to show the value defined from js method.

<template>
  The number is:- {number}
</template>

childLwc.js

The js file has one public reactive property and one public method annonated with @api. When you annonate a method with @api, you can fire the method from another aura component or lightning web component where this component has been called.

Whenever the method gets fired, we are changing the value of public property which is reactive in nature. Whenever the reactive property changes its value, the rerender happens and your screen shows the latest value.

import { LightningElement, api } from "lwc";

export default class ChildLwc extends LightningElement {
  @api number = 1000;
  @api
  getFiredFromAura() {
    if (this.number === 0) {
      this.number = 1000;
    } else {
      this.number = 0;
    }
  }
}

childLwc.js-meta.xml

As we will call this component to another parent aura component, we don’t need to expose it.

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

Call the Lightning web component inside parent Aura component

We will create an aura component named HostLwc which uses the child lightning web component in its component markup. We need to assign an aura:id to access the lightning web component from aura component. We also have a lightning button which will invoke the lightning web component method.

HostLwc.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <Lightning:card>
        <div class="slds-box">
           <c:childLwc aura:id="childlwc"/> <!--Aura id to access the LWC-->
        </div>
        <lightning:button variant="brand" label="Fire Method on Child LWC" onclick="{!c.handleClick}"/>
    </Lightning:card>
</aura:component>

HostLwcController.js

The controller has method which invoke the lightning web component method from aura component method. We can access the LWC using ‘component.find(‘your aura id’)‘ and fire any public method defined in lwc using ‘component.find(‘ your aura id ‘).methodName();‘.

({
	handleClick : function(component, event, helper) {
		component.find('childlwc').getFiredFromAura();
	}
})

Demo(Firing LWC method from Aura)

When you press the button, the number value gets changed. The method is written in lightning web component but we are invoking it through parent aura component.

To learn more about communication in Lightning web component, Keep checking this section:-

• Lightning web component from Salesforcediaries