Conditional Rendering using lwc:if, elseif, else

Hi Everyone, in the Spring 23 release Salesforce made changes related to how we can do Conditional Rendering using lwc:if, elseif, else in Lightning Web Components. So today we will check how we can display different message or content based on different conditions. To render HTML conditionally, add the lwc:if|elseif={property} and lwc:else directive to a nested <template> tag that encloses the conditional content.

NOTE The legacy if:true and if:false directives are no longer recommended as Salesforce intend to deprecate and remove these directives in the future.

Before this release, we can set conditional rendering in your LWC templates by setting the if:true and if:false directives.

<template>
    <template if:true={property1}>
        Statement1
    </template>
    <template if:false={property1}>
        <template if:true={property2}>
            Statement2
        </template>
        <template if:false={property2}>
            Statement3
        </template>
    </template>
</template>

The new conditional directives are simplified, improving our component’s performance. Below is the format we need to follow in new lwc:if, elseif, else. Notice how it reduce the code and made it simple.

<template>
    <template lwc:if={property1}>
        Statement1
    </template>
    <template lwc:elseif={property2}>
        Statement2
    </template>
    <template lwc:else>
        Statement3
    </template>
</template>

Here first we check the condition in lwc:if. If it matches we display the statement 1. If it didn’t matches we check the second lwc:elseif and display the statement 2 if it evaluates to true. Finally none of the above matches to true we display the lwc:else.

Here lwc:elseif and lwc:else both are optional. We cannot use complex condition logic here so for them we need to use getter variable from the JavaScript. So now we have good idea of how we can do Conditional Rendering using lwc:if, elseif, else in LWC.

Let me know what more you want to add in Lightning Web components (LWC) bucket. Happy Programming 🙂