If Condition in LWC

 There are 2 approaches:

Approach 1 : Using if:true or if:false in HTML tags 

<template>
    <div id="waiting" if:false={ready}>Loading…</div>
    <div id="display" if:true={ready}>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
    </div>
</template>

1 2 3 4 5 6 7 8 9 10 11

import { LightningElement } from 'lwc'; export default class App extends LightningElement { name = 'Electra X4'; description = 'A sweet bike built for comfort.'; ready = false; connectedCallback() { setTimeout(() => { this.ready = true; }, 3000); } }

Approach 2: Using if: true or if: false in the template HTML tag.

1 2 3 4 5 6 7

<template> <template if:false={ready}>Loading…</template> <template id="display" if:true={ready}> <div>Name: {name}</div> <div>Description: {description}</div> </template> </template>

Note: controller remains the same.