Navigate to LWC (Lightning Web Component)

by

In this post, we will implement the functionality to navigate to (LWC) Lightning Web Component after clicking a button and how to handle other navigation in LWC.

In an earlier post, we implemented the Navigation Service in LWC to navigate to Record Pages, Web Pages, Lightning Components, List Views, and Objects. There is not any standard method to implement the same thing for (LWC) Lightning Web Component. But there is a simple workaround to do it. So, let’s get into the implementation.

Implementation

In this implementation, we will create a Lightning Web Component, and we will open it after clicking a button from another component. Later, we will also create Lightning Web Component Tab to open components in a Tab.

Navigate to Lightning Web Component

Create a Lightning Web Component lwcCmp and display few Account fields using lightning-record-form. Check this post to know how lightning-record-form works in Lightning Data Service using Lightning Web Components.

lwcCmp.html

<template>
    <lightning-card title="Lightning Web Component">
        <lightning-layout>
            <lightning-layout-item size="6">
                <div class="slds-p-horizontal_small">
                    <lightning-record-form object-api-name="Account" record-id={strRecordId}
                    columns="2" mode="readonly" fields={arrayFields}></lightning-record-form>
                </div>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

lwcCmp.js

import { LightningElement } from 'lwc';
export default class LwcCmp extends LightningElement {
    strRecordId = '001B000001L7ereIAB';
    arrayFields = ['Name', 'AccountNumber', 'Phone', 'Type', 'Website'];
}

The trick to navigating to Lightning Web Component is to wrap it inside Aura Component and open Aura Component using Navigation Service.

Create an Aura Component AuraCmp and include lwcCmp inside it. Make sure to implement lightning:isUrlAddressable in AuraCmp.

AuraCmp.cmp

<aura:component implements="flexipage:availableForAllPageTypes, lightning:isUrlAddressable, force:appHostable">
    <c:lwcCmp></c:lwcCmp>
</aura:component>

Finally, we just need to create sourceLwc component that will have a button to open the Lightning Web Component.

sourceLwc.html

<template>
    <lightning-card title="LWC Navigation">
        <div class="slds-p-left_medium">
            <br/>
            <lightning-button-group>
                <lightning-button label="Open Lightning Web Component" onclick={openLwcCmp}></lightning-button>
            </lightning-button-group>
        </div>
        <br/>
    </lightning-card>
</template>

In JS Controller, we need to import Navigation Service and call the navigate method. Check this post if you want to know how to implement Navigation Services in LWC.

sourceLwc.js

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class SourceLwc extends NavigationMixin(LightningElement) {
    openLwcCmp(){
        this[NavigationMixin.Navigate]({
            type: 'standard__component',
            attributes: {
                componentName: 'c__AuraCmp'
            }
        });
    }
}

Navigate to Lightning Web Component in Action

This is how it will look:

Navigate to Lightning Web Component
Navigate to Lightning Web Component

That is all from this post. If you want to check more Lightning Web Component implementations, you can check it here.

If you want to know more about Navigation in LWC, please check official Salesforce documentation here.

Below are some recommended implementations for you:

Please Subscribe if you don’t want to miss new posts. Thanks!

Leave a Comment