Lightning web component Conditional Rendering

Let’s discuss here how to use the lightning web component HTML template if:true|false directive to display conditional data. The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. As the name suggests, the attribute directives are altering the properties of an element to which they are attached and the structural ones are changing. Directives are special HTML attributes, like if:true and for:each, that gives you more power to manipulate the DOM in markup.HTML templates also render data to the DOM.  Please refer to this link for the development environment setup 

To render HTML conditionally, add the if:true|false directive to a nested <template> tag that encloses the conditional content.The if:true|false={property} directive binds data to the template and removes and inserts DOM elements based on whether the data is a truthy or falsy value.

1. Create Lightning web component

create a lightning web component using the following SFDX command. In this component, we will be showing the text value based on the selected checkbox.

sfdx force:lightning:component:create --type lwc -n ConditionalRendering -d force-app/main/default/lwc

Here is the ConditionalRendering.html code

<template>
    <lightning-card title="Filters" icon-name="standard:calibration">
        <div class="slds-m-horizontal_medium">
            <h1>Rating</h1>
            <template if:true={ratings.data}>
                <template for:each={ratings.data.values} for:item="rating">
                    <lightning-input key={rating.value} label={rating.label} data-filter="ratings" data-value={rating.value}
                        type="checkbox" onchange={handleOnChange}></lightning-input>
                </template>
            </template>
           
        </div>
    </lightning-card>
Selected Value - {selectVal} <br>
    <template if:true={isSelectHot}>
        Account Rating is Hot ...
    </template>
    <template if:true={isSelectWarm}>
        Account Rating is Warm ...
    </template>
    <template if:true={isSelectCold}>
        Account Rating is Cold ...
    </template>


</template>

Use this code in ConditionalRendering.js

import {
    LightningElement,
    wire,track,
    api
} from 'lwc';
import {
    getPicklistValues
} from 'lightning/uiObjectInfoApi';
import RATING from '@salesforce/schema/Account.Rating';

export default class ConditionalRendering extends LightningElement {
    @api selectVal;
    @wire(getPicklistValues, {
        recordTypeId: '012000000000000AAA',
        fieldApiName: RATING
    })
    ratings;
    handleOnChange(event) {
        this.selectVal = event.target.label;
    }
    get isSelectHot() {
        return this.selectVal === "Hot";
    }
    get isSelectWarm() {
        return this.selectVal === "Warm";
    }
    get isSelectCold() {
        return this.selectVal === "Cold";
    }

}

Use this code ConditionalRendering.js-meta.xml code

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="ConditionalRendering">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

 

2. Push changes to scratch org.

Push changes to scratch using this command and add this component to record page using lighting app builder

sfdx force:source:push

And you can able to see the below output and based on the selected checkbox component will present the text to UI.

 

Understand the Code

The following code will return the picklist values from the Account rating field and we will be using this wire adapter data show in the UI.

   @api selectVal;
    @wire(getPicklistValues, {
        recordTypeId: '012000000000000AAA',
        fieldApiName: RATING
    })
    ratings;

 

The following markup is converted the picklist values into the select checkboxes and onchange method will update the selected values 

 handleOnChange(event) {
        this.selectVal = event.target.label;
    }

The following markup is used to render the data based on selected values.

 <template if:true={isSelectHot}>
        Account Rating is Hot ...
    </template>
    <template if:true={isSelectWarm}>
        Account Rating is Warm ...
    </template>
    <template if:true={isSelectCold}>
        Account Rating is Cold ...
    </template>