Hello Conditional Rendering

​

Overview

​

What It Does

​

Component Code

import { LightningElement } from 'lwc';

export default class HelloConditionalRendering extends LightningElement {
    areDetailsVisible = false;

    handleChange(event) {
        this.areDetailsVisible = event.target.checked;
    }
}

​

Key Concepts

• lwc:if Directive: Renders content when the expression evaluates to true
• lwc:else Directive: Renders alternative content when the lwc:if condition is false
• Boolean Properties: The areDetailsVisible property tracks the checkbox state
• Checkbox Events: The event.target.checked provides the checkbox’s boolean value
• Conditional DOM: Elements are added/removed from the DOM based on the condition

​

How It Works

1. The checkbox is initially unchecked, so areDetailsVisible is false
2. The lwc:else block renders “Not showing details”
3. When the user checks the checkbox, handleChange sets areDetailsVisible to true
4. The lwc:if block renders “These are the details!”
5. The lwc:else block is removed from the DOM

​

Important Notes

• The lwc:if and lwc:else directives must be used on <template> tags
• The lwc:else must immediately follow the lwc:if block
• Content is completely added or removed from the DOM, not just hidden with CSS
• For three-way conditions, you can use lwc:elseif

​

Usage Example

<c-hello-conditional-rendering></c-hello-conditional-rendering>

1. Initially displays: “Not showing details”
2. Check the “Show details” checkbox
3. Displays: “These are the details!”
4. Uncheck the checkbox
5. Returns to: “Not showing details”

​

Source Code

• helloConditionalRendering.js
• helloConditionalRendering.html