LWC Conditional Rendering: lwc:if, lwc:elseif, lwc:else

As a developer, one of the most important aspects of building web applications is the ability to control the flow of data and elements on a page. The Lightning Web Components (LWC) framework, which is used to build web applications on the Salesforce platform, provides several directives that allow developers to control the flow of elements on a page.

In this blog post, we will discuss the lwc:if, lwc:elseif, and lwc:else conditional directives introduced in the Spring’23 release and how they supersede the legacy if:true and if:else directives.

The lwc:if directive is used to conditionally render elements on a page based on a boolean expression. The syntax for the lwc:if directive is as follows:

<template lwc:if={isTemplateOne}>
This is template one.
<template lwc:else>
This is template two.
view raw lwcIF.html hosted with ❤ by GitHub

The lwc:elseif and lwc:else directives are used in conjunction with the lwc:if directive to provide additional control over the flow of elements on a page. The lwc:elseif directive is used to render elements if the condition specified in the lwc:if directive is false, and a different condition is true.

The lwc:else directive is used to render elements if none of the conditions specified in the lwc:if and lwc:elseif directives are true.

The syntax for the lwc:elseif directive is as follows:

<template lwc:if={expression1}>
Statement 1
<template lwc:elseif={expression2}>
Statement 2
<template lwc:else>
Statement 3
view raw lwcElseIf.html hosted with ❤ by GitHub

Note: The legacy if:true and if:else directives are no longer recommended because Salesforce intends to deprecate and remove them in the future.

Consider the following guidelines when working with the lwc: Conditional directives if, lwc:elseif, and lwc:else.

  • Use the conditional directives on nested <template> tags, <div> tags, or other HTML elements, and on your custom components tags like <c-custom-cmp>.
  • You can’t precede lwc:elseif or lwc:else with text or another element. Whitespace is ignored between the tags when the whitespace is a sibling of the conditional directive. For example, 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.

In conclusion, the lwc:if, lwc:elseif, and lwc:else directives are powerful tools for controlling the flow of elements on a page in the Lightning Web Components framework. They provide a more consistent and intuitive syntax than the legacy if:true and if:else directives, and it is recommended to use them in new development.

Join 795 other followers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s