Rendering and Navigation in LWC

The power of Lightning web component is templating system, which uses the virtual DOM to render components smartly and efficiently.


The power of Lightning web component is templating system, which uses the virtual DOM to render components smartly and efficiently. To render HTML conditionally, add the if: true|false directive to a nested <template> tag that encloses the conditional content. The if:true|false={property} directive binds data to the template and removes and inserts DOM elements based on whether the data is a true or false value 

Create Lightning Web Component 

Create a Lightning web component using the following SFDX command. In this component, we will be showing the input values with button. Once the values are entered and button is clicked, then the entered values will be shown in output format. 

sfdx force:lightning:component:create –type lwc -n ConditionalRendering -d force-app/main/default/lwc 




Push the changes to Scratch Org 

You can push the changes to scratch org using the below command and add this component to either record page or home page or app page using Lightning app builder 

sfdx force:source:push 

If you want to add this component in lightning record page alone, you can specify the lightning__RecordPage only in the meta data file. If isExposed is false, the component is not exposed to Lightning App Builder or Experience Builder. To allow the component to be used in Lightning App Builder or Experience Builder, set isExposed to true and define at least one <target>, which is a type of Lightning page.  



Use the navigation service, lightning/navigation to navigate to many different page types, like records, list views, objects and lightning component. Instead of URL, the navigation service uses a PageReference. A PageReference is a JavaScript object that describes the page type, its attributes, and the state of the page. 

A component calls this[NavigationMixin.Navigate] to navigate to another page in the application. 

To use the navigation service, we should import the lightning/navigation module in the component’s JavaScript class. 

import { NavigationMixin } from ‘lightning/navigation’; 

Then, Apply the NavigationMixin function to your component’s base class. 

export default class navigationExample extends NavigationMixin(LightningElement) {} 

To dispatch the navigation request, call the navigation service’s [NavigationMixin.Navigate](pageReference,[replace]) function 



            type: “standard__component“, 

            attributes: { 

                componentName: “c__DESTINATION_AURA_COMPONENT 


            state: { 

// You can pass any key and value in the state object.  

//The key must include a namespace, and the value must be a string. 




The below example shows that how to navigate from one component to another component. The source component is an LWC component and the destination component is an Aura component. 

Step 1: Create an Aura Component 



Step 2: Create a Lightning Web Component 




Step 3: Push the web components changes to scratch org 

You can push the changes to scratch org using sfdx force:source:push command 

Step 4: Place the component 

You can place the HelloWorld component in either app page or record page or home page using the Lightning app builder. 



In the aura component, we have used lightning:isUrlAddressable interface. The purpose of this interface is to enable direct navigation to a lightning component via URL.  

A component that implements lightning:isUrlAddressable gets access to the page state through the PageReference attribute. The page state is a representation of the current URL query parameters. 


About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.