4

I have 8 parameters to render the elements conditionally, Is it possible to use expressions in if:true statement?

for example:

<template if:true={p1.data || p2.data || p3.data}>
   <!-- some elements -->
</template>

if not, do you have some suggestions?

p.s: use another parameter in .js p = p1 || p2 || p3 usually cause a null pointer problem, because all parameters are retrieved asynchronously.

3 Answers 3

4

At the moment, these kind of expressions are NOT supported in HTML template directives. Instead of using simple computed property, you should be using JS getters and you should be able to get around the null ref problem by placing relevant checks within the getter code. LWC developer guide states the following here.

if:true|false={expression}

Use this directive to conditionally render DOM elements in a template. The expression can be a JavaScript identifier (for example, person) or dot notation that accesses a property from an object (person.firstName). The engine doesn’t allow computed expressions (person[2].name['John']). To compute the value of expression, use a getter in the JavaScript class.

1
  • thank you arut I'll check the document. Looks that I should've known getter earlier
    – Lanjinest
    Commented Nov 30, 2020 at 6:20
3

No LWC does not support expressions.

You can do the logic in .js and then set a getter property boolMakeButtonVisible as shown below.

Here methods async1, async2, async3 are three async methods which demonstrates async updates to variables boolasync1Done, boolasync2Done, boolasync3Done respectively.

Something like this:

cmp :

<div if:true={boolMakeButtonVisible}>
    <lightning-button class="slds-m-left_x-small" variant="brand" label="Send Events" title="Primary action"
                      onclick={handleButtonClick}>Send Event
    </lightning-button>
</div>

boolasync1Done = false;
boolasync2Done = false;
boolasync3Done = false;

connectedCallback() {
    this.async1();
    this.async2();
    this.async3();
}

get boolMakeButtonVisible(){
    return this.boolasync1Done && this.boolasync2Done && this.boolasync3Done;
}

async1(){
    new Promise(resolve => {
        this.boolasync1Done = true;
    })
}

async2(){
    new Promise(resolve => {
        setTimeout( () => {
            this.boolasync2Done = true;
        }, 5000)
    })
}

async3(){
    new Promise(resolve => {
        this.boolasync3Done = true;
    })
}
8
  • The answer feels a bit over-complex; would this not work by having a getter based property like get boolIsTrue() { return this.firstValue && this.secondValue && this.thirdValue && (the actual expression required based on first, second and third values); }
    – Phil W
    Commented Nov 30, 2020 at 7:56
  • Would getter still work if the value of this.firstValue is fetched after some few seconds than this.secondValue && this.thirdValue (As stated above all three values are coming in Async), also how will the getter again get triggered when this.firstValue changes from default to new value after few seconds. Commented Nov 30, 2020 at 8:01
  • I believe so. It should be triggered for each property being changed via a wire that is used within the method. If there's a problem with it not working then you might need to @track the getter (not sure).
    – Phil W
    Commented Nov 30, 2020 at 8:03
  • Yeah then the above one seems a bit complex if it can be achieved via simple getter, thanks. Commented Nov 30, 2020 at 8:06
  • I suggest you give it a try for yourself then update the answer accordingly.
    – Phil W
    Commented Nov 30, 2020 at 8:06
2

if:true and if:false are going to be deprecated. Its successor - lwc:if - also does not support expressions according to the Salesforce documentation:

Complex expressions like !condition or object?.property?.condition aren’t supported. To evaluate complex expressions, use a getter in your JavaScript class.

3
  • what if we want to render if the flag is false? i am trying to set it lwc:if={!condition} OR lwc:if={condition == false} but it does not work
    – Rival
    Commented Mar 8, 2023 at 8:03
  • You will have to create yet another getter function in JavaScript. Commented Jul 26, 2023 at 10:35
  • Then you leave lwc:if empty and use lwc:else. ` <template> <template lwc:if={condition}><!--nothing--> </template> <template lwc:else> Statement2 </template> </template> `
    – Kacper A
    Commented Jan 23 at 13:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .