template if:true Conditional Rendering LWC

template if:true Conditional Rendering LWC(Lightning Web Component)

To render HTML conditionally, add the if:true|false directive to a nested <template> tag that encloses the conditional content. template if:true|false directive is used to display conditional data.

Render DOM Elements Conditionally Lightning Web Component

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. 

template if:true  LWC Example

Let’s see a simple example to show content based on the selection of checkbox. Example contains a checkbox labeled Show details. When a user selects or deselects the checkbox., based on that content is visible. This example has been copied from official link.

templateIFTrueExampleLWC.html

<template>     <lightning-card title="TemplateIFTrueConditionalRendering" 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>

templateIFTrueExampleLWC.js

import { LightningElement } from 'lwc'; export default class TemplateIFTrueExampleLWC extends LightningElement {     areDetailsVisible = false;     handleChange(event) {         this.areDetailsVisible = event.target.checked;     } }

templateIFTrueExampleLWC.js-meta.xml

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

Now we can add this lwc component on home page.

• Go to Home page
• Click Setup (Gear Icon) and select Edit Page.
• Under Custom Components, find your templateIFTrueExampleLWC component and drag it on right hand side top.
• Click Save and activate.

 

We will get the following Output

 

When user select the checkbox, we will see the following output

 

Let’s see some practical example. In this example, account list is fetched from the database. If there is some error in fetching account list then show error otherwise show account list

AccountHelper.cls

public with sharing class AccountHelper {     @AuraEnabled(cacheable=true)     public static List<Account> getAccountList() {         return [SELECT Id, Name, Type, Rating,                 Phone, Website, AnnualRevenue             FROM Account];     } }

accountListForEachLWC.html

<template>     <lightning-card title="Account List using for:each" icon-name="custom:custom63">         <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>

accountListForEachLWC.js

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

For full detail about this example, please refer to for:each template directives in LWC

For more details please refer to official link.