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