Render DOM Elements Conditionally

The legacy if:true and if:false directives are no longer recommended. To future-proof your code, replace them with the lwc:if|elseif|else conditional directives.

Note

Directives are special HTML attributes that let you manipulate the DOM using markup. To render different HTML depending on a {property}, add conditional directives to a tag that encloses your conditional content.

Lightning Web Components supports the conditional directives lwc:if={property}, lwc:elseif={property}, and lwc:else. The lwc:if|elseif directives bind {property} to the template, removing and inserting DOM elements based on whether the data is a truthy or falsy value.

Usage and Considerations

You can use conditional directives on nested <template> tags and HTML standard tags such as <div>. You can also use conditional directives with your custom component tags like <c-custom-cmp> or base component tags like <lightning-spinner>.

For a full list of guidelines for conditional directive usage, see HTML Template Directives: lwc:if|elseif={expression} and lwc:else.

Example: Static Conditions

The following example has two properties: property1 and property2.

1<template>
2  <template lwc:if={property1}> Statement1 </template>
3  <template lwc:elseif={property2}> Statement2 </template>
4  <template lwc:else> Statement3 </template>
5</template>

Only one of the three statements renders based on this logic:

Statement1 renders if property1 is true.
Statement2 renders if property1 is false and property2 is true.
Statement3 renders if property1 and property2 are false.

Although the example uses all three directives, lwc:elseif and lwc:else are optional.

Example: Interactive Conditions

Let’s look at another example. This template contains a checkbox labeled Show details. When a user selects or deselects the checkbox, the handleChange function sets the value of the areDetailsVisible property. If the areDetailsVisible property is true, the lwc:if directive renders the nested template, which displays These are the details!.

1<!-- helloConditionalRendering.html -->
2<template>
3  <lightning-card title="HelloConditionalRendering" icon-name="custom:custom14">
4    <div class="slds-m-around_medium">
5      <lightning-input
6        type="checkbox"
7        label="Show details"
8        onchange={handleChange}
9      ></lightning-input>
10      <template lwc:if={areDetailsVisible}>
11        <div class="slds-m-vertical_medium">These are the details!</div>
12      </template>
13    </div>
14  </lightning-card>
15</template>

Notice that the JavaScript doesn’t manipulate the DOM, it simply changes the value of a property.

1// helloConditionalRendering.js
2import { LightningElement } from "lwc";
3
4export default class HelloConditionalRendering extends LightningElement {
5  areDetailsVisible = false;
6
7  handleChange(event) {
8    this.areDetailsVisible = event.target.checked;
9  }
10}

Checkbox labeled Show details.

Checkbox with Show Details checked and detail text displaying beneath.

To toggle the value of a boolean property in markup, default the value to false. See Boolean Properties.

Note

This sample code is the helloConditionalRendering component from the github.com/trailheadapps/lwc-recipes repo. For an example that uses a conditional directive on an HTML element, such as a div element, see the helloIterator component.

Tip

Example: Nested Conditional Directives

You can nest conditional statements within one another to create complex custom logic. For example, the following code checks if a user is logged in, and if they are, it subsequently checks if they have new notifications.

1<template>
2    <template lwc:if={isLoggedIn}>
3        <p>Welcome back, User!</p>
4        <template lwc:if={hasNewNotifications}>
5            <strong>You have new notifications!</strong>
6        </template>
7        <template lwc:else>
8            No new notifications at this time.
9        </template>
10    </template>
11    <template lwc:else>
12        <p>Welcome, Guest!</p>
13    </template>
14</template>

Example: Nested Conditional Directives in Components

You can nest conditional directives inside components. In this example, if property1 is true, <c-child-1> is rendered inside <c-parent>. If property1 is false and property2 is true, <c-child> renders <c-child-2> instead.

1<!-- VALID CODE -->
2<c-parent>
3  <template lwc:if={property1}>
4    <c-child-1></c-child-1>
5  </template>
6  <template lwc:elseif={property2}>
7    <c-child-2></c-child-2>
8  </template>
9</c-parent>

However, preceding lwc:elseif or lwc:else with text or another element isn’t allowed. The following sample code throws an error because the lwc:elseif directive must be used immediately after an element with lwc:if or lwc:elseif.

1<!-- INVALID CODE -->
2<template lwc:if={property1}>
3  <c-child-1></c-child-1>
4</template>
5<div>This preceding div element before lwc:elseif makes the code invalid.</div>
6<template lwc:elseif={property2}>
7<c-child-2></c-child-2>
8</template>

See Also