Salesforce LWC Conditional Rendering: lwc:if – lwc:elseif – lwc:else

In this blog post, we will be discussing LWC’s conditional rendering directives that is a part of Spring’23 release. They are  lwc:if, lwc:elseif, and lwc:else. Let’s see how they can be used to build dynamic and interactive user interfaces.

Conditional rendering is a powerful feature that allows developers to show or hide elements based on certain conditions. With LWC, conditional rendering is made easy with three directives – lwc:if, lwc:elseif, and lwc:else.

The lwc:if directive is used to conditionally render an element based on a Boolean value. If the Boolean value is true, the element will be displayed; otherwise, it will be hidden. Here is an example:

<template>
    <template lwc:if={content1}>
        Content 1 is visible
    </template>
    <template lwc:else>
        Content 2 is visible
</template>