Search code examples
javascriptsalesforcesalesforce-lightninglwc

Does Lightning Web Component IF Directive support multiple conditions?

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

Solution

  • 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 compilation?

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

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

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