How to Implement Conditional Rendering in Lightning Web Component?

In Salesforce Lightning Web Components, we can apply conditional rendering, through which we can hide the elements of the LWC component or display them conditionally. To conditionally render the elements of an LWC component, we use the directives if: true and if: false.

In this Salesforce tutorial, we will learn how to implement conditional rendering in the Lightning web components.

Table of Contents

Implement Conditional Rendering in the Salesforce Lightning Web Component

In Lightning web components, we have two key directives for applying conditional rendering.

if:true={expression} – Renders the content inside the tag if the expression evaluates to true.
if:false={expression}– Renders the content inside the tag if the expression evaluates to false.

These directives are used in the HTML template and depend on the properties defined in the JavaScript file.

How to add conditional rendering in Salesforce LWC

Example-1:

In this example, we will create a Lightning web component in which a message will be shown or hidden based on a button click. In this, we add constional rendering to the LWC component using the if:true expression.

1. Create an LWC component and enter the code below in the HTML file. In this, we have defined the UI of the button and message that will be visible conditionally on button click.

<template>
    <lightning-card title="Conditional Rendering Demo">
        <div class="slds-p-around_medium">
            <lightning-button label="Toggle Message" onclick={toggleMessage}></lightning-button>
            <template if:true={isMessageVisible}>
                <p class="slds-m-top_medium">This message is conditionally rendered.</p>
            </template>
        </div>
    </lightning-card>
</template>

The directive if:true={isMessageVisible} ensures that the message inside the </p> tag only renders when isMessageVisible is true.

2. After this, enter the code below in the JS file to handle the logic to control the visibility and render it through the toggle message when conditions are true.

import { LightningElement } from 'lwc';

export default class Conditionalrenderingdemo extends LightningElement {
    isMessageVisible = false;

    toggleMessage() {
        this.isMessageVisible = !this.isMessageVisible;
    }
}

The property “isMessageVisible=false” will ensure that by default, the message will hidden and toggleMessage will display message when button is clicked.

3. After this, enter the below code in the meta.xml file to make the component visible to the Lightning pages.

<isExposed>true</isExposed>

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

4. Navigate to the lightning page and deploy the component. Here, you will see the button in the UI of the LWC component, and it will display the message content only when we click on it.

As we click on the button, the property isMessageVisible will be set to true, and the message will be displayed according to the condition.

This way, we can add conditional rendering to the elements of Salesforce lightning web components using the if:true expression.

Example-2:

Let’s take another example of conditional rendering in the elements of Lightning Web Components, where we will render the element conditionally using the expression if:false.

In this example, the LWC component will display a text message similar to the text that appears in required input fields when we create a record. The text will be displayed when the input field is empty, and as we enter text in the input field, the conditional text message will disappear.

1. Create an LWC component and enter the code below in the HTML file.

<template>
    <lightning-card title="Condotional Message Redering">
        <lightning-input label="Enter Text" onchange={handleInputChange}></lightning-input>

        <template if:false={hasText}>
            <p class="slds-text-color_error slds-m-top_medium">
                Please enter some text above.
            </p>
        </template>
    </lightning-card>
</template>

In the above template, we have used the expression if:false={hasText}. Then, it will check the input field, and if it is blank, the condition will return false and display the text.

2. After this, enter the code below in the JS file to define the conditional rendering of the text in the LWC component.

import { LightningElement } from 'lwc';

export default class ConditionalMessage extends LightningElement {
    hasText = false;

    handleInputChange(event) {
        this.hasText = event.target.value.trim() !== '';
    }
}

Initially, the hasText = false, so the message “Please enter text above” will be visible, and as the user types something in the input field, hasText becomes true, and the message disappears from the LWC component.

3. Now, expose the LWC component to the lightning page using the code below.

<isExposed>true</isExposed>

    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

4. Deploy the LWC component to the lightning page, and there you will see that the text is displayed initially below the input field.

When we enter any value in the input, the text will disappear because here hasText will become true.

Add Conditional rendering in Salesforce LWC components

This way, we can add conditional rendering in Salesforce Lightning Web Components using the if:false expression.

Conclusion

In this Salesforce tutorial, we have learned how to apply conditional rendering in Salesforce Lightning web components using the expression if:true and if:false. In the above examples, we implemented conditional rendering in the LWC components using both if:true and if:false expressions.

How to Implement Conditional Rendering in Lightning Web Component?

Implement Conditional Rendering in the Salesforce Lightning Web Component

Conclusion

DOWNLOAD FREE AGENTFORCE EBOOK

FREE SALESFORCE FLOW EBOOK