Hi I am new to LWC world & its syntax. I wanted to ask, if LWC supports multiple condition in a single statement?

Ex:

<template if:true={condition1 == 'value1' && condition2 == 'value2'}></template>

Getting Error on using multiple conditions on single line statement.

or should go for below approach

html - <template if:true={validateCondition}></template>
class js file - get validateCondition() { return (condition1 == 'value1' && condition2 == 'value2');}

Or have to use nested conditions

<template if:true={condition1 == 'value1'}>
  <template if:true={condition2 == 'value2'}>
  </template>
</template>

Current using above statement

Hi I am new to LWC world & its syntax. I wanted to ask, if LWC supports multiple condition in a single statement?

Ex:

<template if:true={condition1 == 'value1' && condition2 == 'value2'}></template>

Getting Error on using multiple conditions on single line statement.

or should go for below approach

html - <template if:true={validateCondition}></template>
class js file - get validateCondition() { return (condition1 == 'value1' && condition2 == 'value2');}

Or have to use nested conditions

<template if:true={condition1 == 'value1'}>
  <template if:true={condition2 == 'value2'}>
  </template>
</template>

Current using above statement

• javascript
• salesforce
• salesforce-lightning
• lwc

1 Answer 1

Option 2. Keep html clean. The decisions to show/hide parts of page are part of your business logic, should be kept in JS with other calculations. That'd also make it testable. I don't think you even can do option 3, I expect it to fail on pilation?

You can't use formulas in these or anything puted, only straight properties and getters. https://developer.salesforce./docs/ponent-library/documentation/en/lwc/lwc.reference_directives

Migration guide might help too: https://developer.salesforce./docs/ponent-library/documentation/en/lwc/lwc.migrate_expressions

Answer to this one is cool too: https://salesforce.stackexchange./q/249293/799