Migrate Conditionals

Migrate <aura:if> tags in an Aura component to lwc:if, lwc:elseif, and lwc:else in a Lightning web component.

Here’s the syntax in an Aura component.

1<aura:if isTrue="{!v.something}">
2  <div>Conditional Code</div>
3  <aura:set attribute="else">
4    <div>Conditional Code</div>
5  </aura:set>
6</aura:if>

Here’s the syntax in a Lightning web component.

1<template>
2  <div lwc:if={something}>Conditional Code</div>
3  <div lwc:elseif={something}>Conditional Code</div>
4</template>

1import { LightningElement } from "lwc";
2export default class MyComponentName extends LightningElement {
3  something = true;
4}

See Also

Render DOM Elements Conditionally

Release Preview

This release is in preview. Features described here don't become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can't guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.