Navigation from LWC Component to Aura Component

To Navigate from LWC to an Aura Component , we can use the Lightning Navigation Service  

Steps  

• Create an Aura component which  implements lightning:isUrlAddressable. 

• Create a LWC component which extends the NavigationMixin function. 

• Finally Navigate to our Aura Component by using Navigation services. 

What is lightning:isUrlAddressable ? 

lightning:isUrlAddressable is an interface in the Lightning Component framework that allows a Lightning component to be used as a target for a URL. When a component implements the lightning:isUrlAddressable interface, it can be navigated directly using a URL, with parameters passed in the URL that can be used by the component. 

What is Navigation ? 

In Lightning Web Components (LWC), navigation refers to the process of directing the user to a specific page or action in the Salesforce org. The lightning/navigation module provides a set of methods to navigate programmatically from one page to another. 

Create Aura Component :  

Add lightning:isUrlAddressable interface to the Aura Component (This makes Aura component accessible via a URL) 

Create LWC Component : 

Use the NavigationMixin in your LWC Component to navigate to Aura Component 

Here c__NavigationAura is our Aura Component Name. 

Here how it Looks : 

This is LWC Component with a button , 

On Click of that button – you will be navigated to Aura Component  

Aura Component :  

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes, 

                            flexipage:availableForRecordHome,force:hasRecordId, 

                            forceCommunity:availableForAllPageTypes, 

                            force:lightningQuickAction,lightning:isUrlAddressable " access="global" > 

    <lightning:card title="Aura Component"> 

        <div class="slds-box slds-var-m-around_medium"> 

        <b><lightning:formattedText value="Welcome to Aura Component From LWC" /></b> 

        </div> 

    </lightning:card> 

</aura:component> 

LWC Component : 

<template> 

    <lightning-card title="LWC Component"> 

        <div class="slds-box slds-var-m-around_medium"> 

            <lightning-button variant="brand" label="Click to Call Aura Component " onclick={doNavigateToAura}> 

            </lightning-button> 

        </div> 

    </lightning-card> 

</template> 

JS Code : 

import { LightningElement } from 'lwc'; 

import { NavigationMixin } from 'lightning/navigation'; 

export default class NavigationLWC extends NavigationMixin(LightningElement){ 

doNavigateToAura() { 

        this[NavigationMixin.Navigate]({ 

            type: 'standard__component', 

            attributes: { 

                componentName: 'c__NavigationAura', 

            }, 

        }); 

    } 

}