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

To render HTML conditionally, we used to add the if:true|false directive to a nested <template> tag that encloses the conditional content. But with Spring 23 we can do Conditional Rendering in LWC using new lwc:if, lwc:elseif and lwc:else. In this blog post, we will talk about the lwc:if, lwc:elseif, and lwc:else conditional directives introduced in the Spring’23 release and Let see how lwc:iflwc:elseif, and lwc:else conditional directives supersede the legacy if:true and if:else directives.

What is Conditional Rendering in LWC?

Conditional rendering in the lightning web component (lwc) is a way to display components or elements based on a specific condition. For instance, you can display different greeting messages depending on the time of day.

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

Let’s see how to use lwc:if, lwc:elseif and lwc:else in lightning web components. With the new lwc:iflwc:elseif, and lwc:else conditional directives, the property getters are accessed only one time per instance of the directive. Here is an example of how we can use it.

<template>
    <template lwc:if={expression1}>
        Statement 1: Hi
    </template>
    <template lwc:elseif={expression2}>
        Statement 2 : Hello
    </template>
    <template lwc:else>
        Statement 3 : How are you?
    </template>
</template>

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

if:true and if:false

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>

Consideration for lwc:if, lwc:elseif and lwc:else

  • You can’t precede lwc:elseif or lwc:else with text or another element.
  • you can’t have a <div> tag that comes after lwc:if and before lwc:else
  • Complex expressions like !condition or object?.property?.condition aren’t supported. To evaluate complex expressions, use a getter in your JavaScript class.

Amit Chaudhary
Amit Chaudhary

Amit Chaudhary is Salesforce Application & System Architect and working on Salesforce Platform since 2010. He is Salesforce MVP since 2017 and have 17 Salesforce Certificates.

He is a active blogger and founder of Apex Hours.

Articles: 460

3 Comments

  1. Hi Amit , just have one question , as with the help of template if:false={attribute} we can directly check whether the attribute is false or not and render the component but now how to directly check for false condition using lwc:if lwc:else ?

    • See section in article Consideration For Lwc:If, Lwc:Elseif And Lwc:Else

      Use a getter to handle a false value

      ————————-HTML———————————————

      Statement 1: Hi

      Statement 2 : Hello

      Statement 3 : How are you?

      ——————- JS FILE————————————————
      get setValue(){

      // If this.someValue is false, return a value of true
      let myValue = this.someValue ? false : true);
      return myValue;
      }

Leave a Reply

Your email address will not be published. Required fields are marked *