#5: Aura Coexistence in LWC | Learn Lightning Web Component Development | LWC Stack Salesforce

Kapil August 20, 2023

Agenda

  • Composition
  • Events

Aura and LWC can work together, you can compose  and Lightning Web Component in AURA as a child but it’s not the other way around. 
But before using a Lightning Web Component as a child in Aura make sure you understands the pros & cons of it.

Composition

To add your Lightning Web Component as a Child in Aura you can use camel case with a colon separating the namespace and the component name.
Below Aura component is composed of lightning:card, which is base Lightning component, and c:lwcHelloWorld, which is a LWC.

lwcHelloWorld.html
1
2
3
4
5
6
7
8
<!-- lwcHelloWorld.html -->
<template>
    <lightning-card title="LWC Hello World" icon-name="custom:custom14">
        <div class="slds-card__body slds-card__body_inner">
            Hello, {name}!
        </div>
    </lightning-card>
</template>


lwcHelloWorld.js
1
2
3
4
5
import { LightningElement, api } from "lwc";

export default class LwcHelloWorld extends LightningElement {
  @api name;
}

AuraComponent.cmp
1
2
3
4
5
<!-- auraComponent.cmp file -->
<aura:component implements="flexipage:availableForAllPageTypes">
    <lightning:card title="Aura Hello World" iconName="custom:custom30" />
    <c:lwcHelloWorld name="Earthling" />
</aura:component>



You can also call child Lightning Web Component Methods from a Parent Aura Component. Let’s continue the previous example. Let’s suppose we have to call this testFunction from our Aura component. To do that you just have to give the LWC an aura:id and use cmp.find(). 
For example, cmp.find(‘childLwc’).testFunction().

auraComponent.cmp
1
2
3
4
5
<!-- auraComponent.cmp file -->
<aura:component implements="flexipage:availableForAllPageTypes">
    <lightning:card title="Aura Hello World" iconName="custom:custom30" />
    <c:lwcHelloWorld aura:id="childLwc" name="Earthling" />
</aura:component>


Events

Now let’s understand how you can pass data from embedded Lightning Web Component to Aura.
For this example we will have a list of account records in nested LWC component and will pass the selected Account data from LWC to Aura component.



In below example I am having List of Account records in my Lightning Web Component and using event I am passing Selected Account to Aura Component. 

AccountController.apxc
1
2
3
4
5
6
public with sharing class AccountController{
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccList(){
        return [SELECT Id, Name, Phone FROM ACCOUNT ORDER BY CreatedDate desc Limit 10];
    }
}


GetAccountList.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
    <template if:true={accounts.data}>
        <template for:each={accounts.data} for:item="account">
            <a href="#" key={account.Id} data-account-id={account.Id} onclick={handleSelect}>
                <lightning-layout>
                     <lightning-layout-item padding="horizontal-small">
                        <p>{account.Name}</p>
                    </lightning-layout-item>
                </lightning-layout>
            </a>
        </template>
    </template>
</template>


GetAccountList.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { LightningElement,wire } from 'lwc';
import getAccList from '@salesforce/apex/AccountController.getAccList';

export default class GetAccountList extends LightningElement {
    @wire(getAccList) accounts;
    
    handleSelect(event) {
        event.preventDefault();
        const selectEvent = new CustomEvent('accountselect', {
            detail: { accountId: event.currentTarget.dataset.accountId }
        });
        this.dispatchEvent(selectEvent);
    }
}


AuraComponent.cmp
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="accountId" type="Id" />
    <aura:attribute name="selectedAccount" type="Account" />
    <div style="background-color:white; padding:10px">
        <force:recordData aura:id="getAccount" recordId="{!v.accountId}" fields="['Name', 'Phone',]"
            targetFields="{!v.selectedAccount}" />
        <p>I am in Aura Component</p>
        <table class="slds-table slds-table_bordered">
            <tr>
                <td>Account Name</td>
                <td>{!v.selectedAccount.Name}</td>
            </tr>
            <tr>
                <td>Account Phone</td>
                <td>{!v.selectedAccount.Phone}</td>
            </tr>
        </table>

        <lightning:card title="LWC">
            <b>I am Web Component</b>
            <c:getAccountList onaccountselect="{!c.handleAccountSelect}" />
        </lightning:card>
    </div>
</aura:component>

AuraComponentController.js
1
2
3
4
5
6
7
({
    handleAccountSelect: function (component, event) {
        var service = component.find('getAccount');
        component.set('v.accountId', event.getParam('accountId'));
        service.reloadRecord();
    }
})


Checkout the Crash Course Below


 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)

Tags:

Post a Comment

0 Comments