How to utilize conditional expressions in LWC with if true and if:false

/ LWC, Salesforce / By

Expressions assist in selectively showing or concealing elements within markup based on conditions.

Expressions within Aura

<aura:if isTrue="{! (!v.attribute ? ifYes : ifFalse) }">
    <div>Conditional displayed elements/text</div>
</aura:if>

In Aura, expressions can be composed as demonstrated earlier, while in LWC, it’s not feasible to directly construct such expressions within the markup. Instead, expressions must be authored in JavaScript, and their outcomes can be employed in the markup.

Expressions within LWC

<template>
    <div if:true={expression}>elements</div>
</template>
import { LightningElement } from 'lwc';
export default class SampleComponent {
    get expression() {
        return condition ? true : false;
    }
}

Note: In lwc if:true and if:false looks for boolean value either true or false

References

Related Posts