Set the Attribute values during LWC to Aura component navigation

In this example, we will see how to pass the attribute value to aura component when redirecting to Aura component from LWC component.

Component Structure

We have two components:-

  • lwcToAuraNavigation :- This is a Lightning web component
  • accountAuraComponent :- This is an aura Component


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

  • lwcToAuraNavigation .html
  • lwcToAuraNavigation .js
  • lwcToAuraNavigation .js-meta.xml

lwcToAuraNavigation .html

The html file has lightning-button , on click of button it will redirect to aura component.

label="Navigate to Aura"

lwcToAuraNavigation .js

We have used api decorator to get the current record id of the page. This value will be send to Aura Component. Also Adding two more string variable acntName & acntLocation .

import { LightningElement,api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class LwcToAuraNavigation extends NavigationMixin(LightningElement) {

@api recordId;
acntName ='Back Benchers';
acntLocation = 'Chennai';

navigateToAuraComponent() {
"type": "standard__component",
"attributes": {
"componentName": "c__accountAuraComponent"
state: {
c__recID: this.recordId,
c__accountName: this.acntName ,
c__accountLocation: this.acntLocation


lwcToAuraNavigation .js-meta.xml

This component only visible in Account record page.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">
<targetConfig targets="lightning__RecordPage">


The Aura component has two major file in its bundle. They are:-


<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,lightning:isUrlAddressable,flexipage:availableForAllPageTypes" access="global">
<aura:attribute type="String" name="recID" default="" />
<aura:attribute type="String" name="acntName" default="" />
<aura:attribute type="String" name="acntLocation" default="" />
<aura:handler name="init" value="{!this}" action="{!c.init}"/>

Account id is : {!v.recID} <br/>
Account Name is : {!v.acntName} <br/>
Account Location is : {!v.acntLocation}



In init method , we will get the attribute values using current page reference and and set the values to appropriate aura attribute .

init: function(cmp, evt) {
var myPageRef = cmp.get("v.pageReference");
var recordId = myPageRef.state.c__recID;
var accountName = myPageRef.state.c__accountName;
var accountLocation = myPageRef.state.c__accountLocation;

cmp.set("v.recID", recordId);
cmp.set("v.acntName", accountName);
cmp.set("v.acntLocation", accountLocation);

Demo :

No comments:

Post a Comment