How To Use LWC Lookup Component in Lightning Aura Component

Implement LWC Lookup In Aura:

Use LWC Lookup in Aura Component: In this post we are going to see how to refer Lookup component (created in LWC) in aura component and we will come to know how to handle event dispatched by LWC component in Aura component. On Lwc lookup component we are dispatching recordselection event along with  selectedRecordId, selectedRecordValue. In parent Aura component we are handling event onrecordselection into onAccountSelection function and setting selectedRecordId, selectedRecordName values with selectedRecordId, selectedRecordValue from event.

Check : LWC Lookup Component code here

Create new lightning aura component: HandleLwcLookupInAura

HandleLwcLookupInAura.cmp

 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >  
   <aura:attribute name="selectedRecordId" type="String" />  
   <aura:attribute name="selectedRecordName" type="String" />  
   <div class="slds-box">  
     <c:lwcLookup objectApiName='contact' iconName='standard:contact' onrecordselection="{!c.onAccountSelection}"/>  
   </div>  
   <div class="slds-box">  
     Selected Record Name : {!v.selectedRecordName} <br/>  
     Selected Record Id : {!v.selectedRecordId}   
   </div>  
 </aura:component>  

HandleLwcLookupInAuraController.js

 ({  
      onAccountSelection : function(component, event, helper) {  
           component.set("v.selectedRecordName", event.getParam('selectedValue'));  
           component.set("v.selectedRecordId", event.getParam('selectedRecordId'));  
      }  
 })  

Output:

Subjects:

Lightning Components Lightning Web Components LWC Use LWC Component in Lightning Aura Component

Share This: