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.
By mastering the art of navigating between LWC components, you’re shaping more immersive and user-centric applications. Whether it’s moving from a dashboard to a detailed view or any custom flow you envision, this skill enhances your LWC prowess.
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.
- Nav the Lightning web component to the Aura component and then in the Aura component, we will open our LWC component.
- Seamless Transitions: Move users from one LWC component to another without page reloads or disruptions.
- Contextual Interactions: Pass data or context information between components for a personalized user experience.
- Enhanced Workflows: Streamline processes by connecting components with specific functionalities.
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 : 810542