Hey guys, today in this post we are going to learn about How to use Navigation Service (NavigationMixin.Navigate) Navigate to LWC Aura Component in LWC.
Here are the steps to use the navigation service.
- Navigation service uses a PageReference.And a page reference is JavaScript that describes its page type, its attributes, and the state of the page.
- First, we need to import the lightning/navigation module.
- Use this Syntax:- Import {NavigationMixin} from βlightning/navigation;
Apply the NavigationMixin function to your componentβs base Class.
Final Output β
Other related post that would you like to learn in Salesforce
Create HTML Page β
Step 1:- Create HTML Page : navigationPageLwc.html
navigationPageLwc.html [HTML PAGE]
![]() |
<template>
<!-- Navigate to LWC Aura Component-->
<lightning-card title="Navigate to Aura Component">
<div class="slds-m-around_medium">
<TABLE class="slds-table slds-table_bordered slds-table_col-bordered">
<tr>
<td STYLE="width:50%;">Navigation TO Aura Component</td>
<td STYLE="width:50%;">
<lightning-button variant="brand" label="Navigation to Aura Component" onclick={actionToNavigateAuraCmp}></lightning-button>
</td>
</tr>
</table>
</div>
</lightning-card>
</template>
Create navigationPageLwc.js β
Step 2:- Create JavaScript Page : function.js
navigationPageLwc.js [JavaScript Page]
![]() |
import { LightningElement, api } FROM 'lwc';
import {NavigationMixin} FROM 'lightning/navigation';
export DEFAULT class NavigationPageLwc extends NavigationMixin(LightningElement) {
// Navigate TO Aura Component
actionToNavigateAuraCmp(){
this[NavigationMixin.Navigate]({
TYPE:'standard__component',
attributes:{
componentName:'c__formValidationCmp'
}
});
}
}
Create Lightning Web Component Meta XML
Step 3:- Create Lightning Web Component : navigationPageLwc-meta.xml
SFDX:Lightning Web Component >> New >> navigationPageLwc-meta.xml
navigationPageLwc-meta.xml [LWC Meta Data XML]
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>59.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Further post that would you like to learn in Salesforce
Can we navigate from one LWC to another LWC?
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.
How to debug the lwc component?
The simplest way to run and debug a component during development is to create a Lightning Page and add your component to it. Then load the Lightning Page in your preferred browser and use your favorite inspection and debugging tools. LWC debugging is optimized for Chrome DevTools.
What is LMS in LWC Salesforce?
Lightning Message Service (LMS) is a communication framework provided by Salesforce that enables effective communication between Lightning Web Components (LWC) and other components on a Lightning page.
Related Topics | You May Also Like
Our Free Courses β
π Get Free Course β
![]() π Salesforce Administrators π Salesforce Lightning Flow Builder π Salesforce Record Trigger Flow Builder |
π Get Free Course β
![]() π Aura Lightning Framework π Lightning Web Component (LWC) π Rest APIs Integration |