Migrate Expressions

Migrate expressions from markup in an Aura component to JavaScript in a Lightning web component.

Here’s the syntax in an Aura component.

1<aura:if isTrue="{! (!v.something ? v.optionA : v.optionB) }">
2  <div>Conditional Code</div>
3</aura:if>

In a Lightning web component, use lwc:if and move the expression into JavaScript. Now the code can be unit tested, which is a very, very good thing. Here’s the HTML file.

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

Dynamic content in a Lightning web component’s HTML file doesn’t have quotes around the getter reference and there’s no exclamation point or value provider (v.) syntax. Don’t use the expression syntax from Aura components even though your fingers might be used to typing it!

Here’s an expression in an Aura component.

1<aura:if isTrue="{!v.condition}">

Here’s similar HTML in a Lightning web component.

1<div lwc:if={condition}>Conditional Code</div>

Tip

Here’s the JavaScript file.

1import { LightningElement } from "lwc";
2export default class MyComponentName {
3  get condition() {
4    return something ? true : false;
5  }
6}

See Also

Data Binding in a Template

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.