Hello friends, today we are going to discuss Navigate from one LWC component to another LWC Component. You cannot navigate from the Lightning Web component to the Lightning Web component directly.
Also, check this: Reset Lightning Input Fields in LWC
But we have a workaround, The user can navigate from one LWC to another by embedding the LWC in an Aura Component and then walking from the Aura Component to the LWC.
Key Highlights :
- Lightning components can be navigated directly via URL by adding the lightning:isUrlAddressable interface.
- We use the Navigation service in LWC.
- Navigate the Lightning web component to the Aura component and then in the Aura component, we will open our LWC component.
Code :
lWCSourceNavigation.HTML :
<template>
<lightning-card variant="Narrow" title="LWC Navigation" icon-name="standard:recipe">
<div class="slds-p-horizontal_small" style="text-align:center">
<lightning-button variant="brand" label="Navigate to another LWC" title="Navigate to another LWC" onclick={handleLWCNavigate}
class="slds-m-left_x-small"></lightning-button>
</div>
</lightning-card>
</template>
lWCSourceNavigation.JS:
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class LWCSourceNavigation extends NavigationMixin(LightningElement) {
handleLWCNavigate() {
this[NavigationMixin.Navigate]({
type: "standard__component",
attributes: {
componentName: "c__NavigationHelper"
},
state: {
c__amount: 1000
}
});
}
}
lWCTargetNavigation.HTML :
<template>
<lightning-card variant="Narrow" title="LWC Navigation Target" icon-name="standard:recipe">
<div class="slds-p-horizontal_small" style="text-align:center">
<h2>
Source transfer Value : {amount}
</h2>
</div>
</lightning-card>
</template>
lWCTargetNavigation.JS :
import { LightningElement, api } from 'lwc';
export default class LWCTargetNavigation extends LightningElement {
@api amount;
}
NavigationHelper.cmp :
<aura:component implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable" access="global">
<aura:attribute type="String" name="amount"/>
<aura:handler name="init" value="{!this}" action="{!c.init}"/>
<div class="slds-card">
<c:lWCTargetNavigation amount="{!v.amount}"/>
</div>
</aura:component>
NavigationHelperController.JS :
({
init: function(cmp, evt, helper) {
var myPageRef = cmp.get("v.pageReference");
var amount = myPageRef.state.c__amount;
console.log(amount);
cmp.set("v.amount", amount);
}
})
Output :
Total views : 484555