How to Use Conditional Rendering (lwc:if) in Salesforce LWC

In plain words: Conditional rendering is how you tell your webpage to show or hide specific elements (like text, images, or buttons) based on a true/false rule. In Salesforce LWC, instead of writing clunky JavaScript to manually hide a box, you just wrap the HTML in a special <template lwc:if={variable}> tag. If the variable is true, the user sees it. If it is false, the browser completely removes it.

Building dynamic user interfaces requires components that adapt to user input. If a user hasn't filled out a form, you might want to hide the "Submit" button. If a server request fails, you want an error message to suddenly appear.

In Lightning Web Components (LWC), we handle this using conditional rendering directives. In this tutorial, we will build a simple component that toggles a message block on and off at the click of a button.

Developer Trap: The Legacy if:true Directive
If you look at older Salesforce tutorials, you will see developers using <template if:true={condition}>. While this still technically works, Salesforce officially replaced it with lwc:if, lwc:elseif, and lwc:else in Spring '23. The new directives are significantly faster and easier to read. Always use lwc:if for new development!

Step 1: Create the Component

First, open your terminal (or the VS Code integrated terminal) and run the Salesforce CLI command to generate a new component named conditionalRenderingExample.

sf lightning generate component -n conditionalRenderingExample -d force-app/main/default/lwc

Step 2: Update the JavaScript Controller

Open the conditionalRenderingExample.js file. We need to create a boolean (true/false) variable and an @api method so a parent component can change that variable.

import { LightningElement, api } from 'lwc';

export default class ConditionalRenderingExample extends LightningElement {
    // 1. Define the property that controls visibility
    @api showContent = false;

    // 2. Expose a method to toggle the boolean
    @api
    toggleContent() {
        // Flips true to false, and false to true
        this.showContent = !this.showContent; 
    }
}

Step 3: Update the HTML Template

Now, open the conditionalRenderingExample.html file. We will wrap our content in the modern lwc:if directive, and optionally use lwc:else to show a fallback message.

<template>
    <div class="slds-box slds-theme_default">
        
        <!-- Renders ONLY if showContent is true -->
        <template lwc:if={showContent}>
            <p class="slds-text-color_success">
                🎉 The content is currently visible!
            </p>
        </template>

        <!-- Renders ONLY if showContent is false -->
        <template lwc:else>
            <p class="slds-text-color_error">
                🔒 The content is hidden.
            </p>
        </template>

    </div>
</template>

Step 4: Test the Component (The Parent)

To see this in action, you can drop your new component into any Parent component and use a button to trigger the toggleContent() method.

Parent HTML:

<template>
    <lightning-card title="Conditional UI Tester">
        <div class="slds-m-around_medium">
            
            <!-- The button that triggers the action -->
            <lightning-button 
                label="Toggle Visibility" 
                variant="brand" 
                onclick={handleButtonClick}>
            </lightning-button>
            
            <br/><br/>

            <!-- Our child component sitting quietly -->
            <c-conditional-rendering-example></c-conditional-rendering-example>
            
        </div>
    </lightning-card>
</template>

Parent JavaScript:

import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {
    
    handleButtonClick() {
        // Query the child component and call its exposed method
        const childComponent = this.template.querySelector('c-conditional-rendering-example');
        
        if (childComponent) {
            childComponent.toggleContent();
        }
    }
}

360 Card: lwc:if vs CSS display:none

• CSS display:none: The HTML element is downloaded and built by the browser, but it is made invisible. It still takes up memory.
• lwc:if: The HTML element is completely removed from the DOM. It does not exist in memory, making your page load significantly faster.

Core Takeaway: Always use lwc:if, lwc:elseif, and lwc:else to control UI visibility in LWC. It is much faster and cleaner than writing manual JavaScript to add or remove CSS classes.

Conclusion

Mastering conditional rendering is one of the quickest ways to make your Lightning Web Components feel responsive and professional. By binding the lwc:if directive to a reactive JavaScript property, you can instantly swap out error messages, loading spinners, and data tables without ever forcing the user to refresh the page.

Happy coding!