What is Conditional Rendering in Salesforce

What is Conditional Rendering in Salesforce? we want to hide some of the components from the HTML and show it based on conditions then we can use conditional rendering.

To render a DOM element in a template only when certain conditions are met, we use conditional rendering.

Like Aura Components <Aura:if>, apex (if, else) the same way we have <template if:true> and <template if:false>in Lightning web component.

==> If the value of the if:true expression changes and evaluates to false, all the components inside the <template if:true= {}> tag are destroyed. The components are created again if the if:true expression changes again and evaluates to true.

==> If the value of the if:false expression changes and evaluates to true, all the components inside the <template if:false= {}> tag are destroyed. The components are created again if the if:false expression changes again and evaluates to false.

Conditional Rendering in Salesforce Example

conditionalRendering.html

<!-- helloConditionalRendering.html -->
<template>
    <lightning-card title="HelloConditionalRendering" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <lightning-input type="checkbox" label="Show details" onchange={handleChange}></lightning-input>
            <template if:true={areDetailsVisible}>
                <div class="slds-m-vertical_medium">
                    These are the details!
                </div>
            </template>
        </div>
    </lightning-card>
</template>

conditionalRendering.js

Checkbox labeled Show details.
Checkbox with Show Details checked and detail text displaying beneath.

Other Example:

ifExp.html

<template>
<div>
<template if:true={isTom}>
| <p>This is Tom</p>
</template>
<template if:false={isJerry}>
 <p>This is Jerry</p>
</template>
</div>
</template>

ifExp.js

import { LightningElement } from ‘lwc’;
export default class IfExp extends LightningElement {
    isTom =true;
    isJerry=false;
}

Output:

image

Another Example with help Apex Call:

accountList.html

<template>
<lightning-card title="Account List using for:each"icon-name="custom:custom34">
<div class="slds-m-around_medium">
<template if:true={accounts.data}>
<template for:each={accounts.data} for:item="acc">
<p key={acc.Id}>{acc.Name}</p>
</template>
</template>
<template if:true={accounts.error}>
{accounts.error}
</template>
</div>
</lightning-card>
</template>

accountList.js

import{ LightningElement, wire } from 'lwc';
import getAccountList from '@salesforce/apex/AccountApex.getAccountList';
export default class AccountList extends LightningElement {
@wire(getAccountList) accounts;
}

AccountApex.cls

publicwith sharing AccountApex{
@AuraEnabled(cacheable=true)
public static List<Account> getAccountList() {
 return[SELECT Id, Name, Type, Rating,Phone,
 Website, AnnualRevenueFROM Account];
}
}


Output: will return all accounts with account names .
in the below screenshots are the list of accounts in my salesforce org.

image 2
Scroll to Top