IF - Directive in HTML

 Directive in HTML

if:true|false={expression}

Deprecated. The if:true and if:false directives are no longer recommended. They may be deprecated and removed in the future. Use lwc:if, lwc:elseif, and lwc:else instead.

if:true|false={expression} conditionally renders DOM elements in a template, calling the expression for each of if:true and if:false. In cases where you chain if:true and if:false directives, they are not as performant nor as lightweight as the lwc:if, lwc:elseif, and lwc:else directives. See Render DOM Elements Conditionally.

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.

lwc:if|elseif={expression} and lwc:elseConditionally render DOM elements in a

 template. lwc:if, lwc:elseif, and lwc:else supersede he if:true and if:false directives. Use the conditional directives on nested <template> tags, <div> tags or other 

HTML elements, and on your custom components tags like <c-custom-cmp>.

Both lwc:elseif and lwc:else must be immediately preceded by a sibling lwc:if or lwc:elseif.

<template lwc:if={expression}></template>
<template lwc:else></template>

Both lwc:if and lwc:elseif must evaluate an expression. However, lwc:else must not have an attribute value.

<template lwc:if={expression}></template>
<template lwc:elseif={expression_elseif1}></template>
<template lwc:elseif={expression_elseif2}></template>
<template lwc:else></template>

The expression passed in to lwc:if and lwc:elseif supports simple dot notation.

 Complex expressions like !condition, object?.property?.condition or sum % 2 === 1 aren't supported.

 To compute such expressions, use a getter in the JavaScript class.

NOTE The expressions and property getters are only accessed once per instance of an lwc:if or lwc:elseif. In the above case, if expression is truthy, then none of the other property getters are accessed.

You can't precede lwc:elseif or lwc:else with text or another element. Whitespace is ignored between the tags when the whitespace is a sibling of the conditional directive. For example you can't have a <div> tag that comes after lwc:if and before lwc:else.

<!-- Invalid -->
<template lwc:if={expression}></template>
This text node makes the pattern invalid
<div>This div tag makes the pattern invalid</div>
<template lwc:else></template>

Code comments can be included as a sibling of the conditional directive only

if lwc:preserve-comments isn't enabled.

To check for a falsy, pass in the negation operator in your getter's return value so

the expression is true.

<template lwc:if={notCondition}></template>

get notCondition() {
    return !this.condition;
}

NOTE lwc:if, lwc:elseif, and lwc:else can't be applied to the same element and they cannot be combined with the if:true and if:false directives.