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