Fire method on child LWC component Called multiple times in parent Aura Component

Lightning Aura Component, Lightning Web Component Leave a comment

Do you know to fire method on child LWC component called multiple times in parent Aura component? If your answer is No, This blog focus on it.

We already seen the ability to handle multiple child lightning web component inside another parent lightning web component in this blog. Aura framework also provide the same kind of ability to access another component using unique aura:id.

Design

There are two components involved. They are:-

  • childLwc //Lightning Web Component
  • HostLwc //Lightning Aura Component

Lightning Web Component has been called multiple times inside the Lightning Aura Component. It also has js method which can be triggered from parent Lightning Aura Component.

childLwc

The lightning web component has three file in its bundle. They are:-

  • 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>

handling multiple child LWC in Aura Component

We will create an aura component named HostLwc which uses the child lightning web component in its component markup multiple times. Also, 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

The Aura component bundle has 8 files in its component bundle. We are using two of them in our case.

  • HostLwc.cmp
  • HostLwcController.js

HostLwc.cmp

The component markup has used the child web component four times. The button click will fire the method on each of them.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <Lightning:card>
        <div class="slds-box">
            Lwc Component1 ==>
            <c:childLwc aura:id="childlwc"/><br/>
            Lwc Component2 ==>
            <c:childLwc aura:id="childlwc"/><br/>
            Lwc Component3 ==>
            <c:childLwc aura:id="childlwc"/><br/>
            Lwc Component4 ==>
            <c:childLwc aura:id="childlwc"/><br/>
        </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 lightning web component by running a forEach loop on the array returned by ‘component.find(‘your aura id’)‘ .

Note:- find() returns different types depending on the result.

  • If the local ID is unique, find() returns the component.
  • If there are multiple components with the same local ID, find() returns an array of the components.
  • Also If there is no matching local ID, find() returns undefined.
({
    handleClick : function(component, event, helper) {
        component.find('childlwc').forEach(element => {
            element.getFiredFromAura();
        });
    }
})

fire lightning web component method based on some condition

If you want to fire method after checking some condition, You can easily do by adding an if condition inside forEach loop in JavaScript controller.

({
    handleClick : function(component, event, helper) {
        component.find('childlwc').forEach(element => {
            if(//some condition){
              element.getFiredFromAura();
            }
        });
    }
})

Demo( fire method on child LWC component called multiple times in parent Aura component )

Leave a Reply