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.

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.

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.

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

Here’s similar HTML in a Lightning web component.

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

Here’s the JavaScript file.

See Also