Conditional Rendering in LWC using lwc:if, lwc: and lwc:else

Introduction

Conditional rendering, in the context of Lightning Web Components (LWC), allows developers to control the visibility and behavior of elements based on specific conditions. By using the lwc:if, lwc:elseif, and lwc:else directives, developers can create dynamic and interactive components that adapt to different scenarios. In this article, we will explore how to utilize these directives effectively to enhance the user experience.

The lwc:if Directive

The lwc:if directive is a powerful tool that enables the conditional rendering of elements based on a Boolean expression. It allows you to include or exclude elements dynamically, based on the evaluation of the expression. This directive is particularly useful when you want to show or hide a specific portion of your component’s markup based on specific conditions.

Here’s an example usage of the lwc:if directive:

<template>
    <template if:true={showDetails}>
        <p>These details are only shown when showDetails is true.</p>
    </template>
</template>

In this example, the paragraph element will only be rendered if the showDetails property is true. If it is false, the element will not appear in the rendered output.

The lwc:elseif Directive

Sometimes, you may encounter scenarios where you need to evaluate multiple conditions. The lwc:elseif directive allows you to accomplish this by providing an alternative condition to be evaluated if the preceding lwc:if or lwc:elseif conditions are false.

Consider the following example:

<template>
    <template if:true={showDetails}>
        <p>Details are shown because showDetails is true.</p>
    </template>
    <template elseif:true={loggedInUser}>
        <p>Welcome, {{loggedInUser}}! You are logged in.</p>
    </template>
</template>

In this example, if the showDetails property is false, LWC will evaluate the next condition specified in the lwc:elseif directive. If the loggedInUser property is true, the corresponding paragraph element will be rendered, displaying a customized welcome message for the logged-in user.

The lwc:else Directive

The lwc:else directive provides an alternative condition that is evaluated only if none of the preceding lwc:if or lwc:elseif conditions are true. It allows you to define a fallback option when none of the specified conditions match.

Let’s illustrate the usage of lwc:else with an example:

<template>
    <template if:true={showDetails}>
        <p>Details are shown because showDetails is true.</p>
    </template>
    <template elseif:true={loggedInUser}>
        <p>Welcome, {{loggedInUser}}! You are logged in.</p>
    </template>
    <template else:true>
        <p>Please log in to view the details.</p>
    </template>
</template>

In this case, if neither the showDetails nor the loggedInUser properties evaluate to true, LWC will render the paragraph element specified within the lwc:else directive. This provides a clear message prompting the user to log in to access the details.

Legacy about to be soon depreciated: if:true and if:false

The legacy if:true and if:else directives are no longer recommended as Salesforce intends to deprecate and remove these directives in the future. Salesforce recommend that you replace their usage with the new conditional directives to future-proof your code

This is conditional rendering using if:true and if:false:

<template>
 <template if:true={condition1}> Hello Apex Hours </template>
 <template if:false={condition1}>
 <template if:true={condition2}> If </template>
 <template if:false={condition2}> Else </template> </template> 
</template>

Conclusion

Conditional rendering is a powerful feature in LWC that allows you to create dynamic and interactive components. By utilizing the lwc:if, lwc:elseif, and lwc:else directives, you can control the visibility and behavior of elements based on specific conditions. This enables you to enhance the user experience and provide personalized content. Start leveraging these directives in your LWC development to create more flexible and adaptable components.