how to check if condition in lwc -- w3web.net

LWC Template if:true/false directive condition checked to render data through for:each and iterate list over Contact Object in lightning web component Salesforce lwc | how to handle multiple conditions template if:true to check against two values to iterate list object through for:each in Salesforce LWC

by
5,913 views

Hey guys, today in this post we are going to learn about How to use template if:true/false directive condition checked to render data through for:each and iterate list over Contact Object in lightning web component Salesforce LWC

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. To know more details about Render DOM Elements Conditionally, Click Here.

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

 

 

Files we used to check condition Template if:true in Salesforce LWC →

lwcTrueFalseData.html LWc HTML File Template HTML file to check condition Template if:true in Salesforce Lightning Web Component (LWC)
lwcTrueFalseData.js LWC JavaScript File It’s hold @wire decorator to get list of Contact records.
lwcTrueFalseData.js-meta.xml XML Meta File It is used to where this lightning web component file you want to display as lightning__AppPage, lightning__RecordPage, lightning__HomePage.
lwcTrueFalseDataCtrl.cls Apex Controller It is used for retrieve list of records from Contact object using @wire decorator in Salesforce LWC.

 

Final Output →

template if else in lwc -- w3web.net

 

You can download file directly from github by Click Here.

 
 

Other related post that would you like to learn in Salesforce
  • Find the below steps

Create Lightning Web Component HTML →

Step 1:- Create Lightning Web Component : lwcTrueFalseData.html

SFDX:Lightning Web Component >> New >> lwcTrueFalseData.html

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 

lwcTrueFalseData.html [Lightning Web Component HTML]

  1.    <template>
  2.     <lightning-card>
  3.         <div class="slds-m-around_medium">
  4.             <h3 class="slds-text-heading_medium"><lightning-icon icon-name="custom:custom85" size="small"></lightning-icon> <strong style="color:#270086; font-size:13px; margin-right:5px;"> Contact List using for:each and  @wire decorator in Lightning Web Component (LWC) </strong></h3>
  5.             <br/><br/>
  6.             <template if:true={conObjItem.data}>
  7.                 <table class="slds-table slds-table_col-bordered slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols slds-tree slds-table_tree" style="border-collapse:collapse; border:1px #ddd solid;">
  8.                     <thead>
  9.                         <tr>
  10.                             <td style="background: #eee; font-weight:bold;">Name</td>
  11.                             <td style="background: #eee; font-weight:bold;">Email</td>
  12.                             <td style="background: #eee; font-weight:bold;">Phone</td>
  13.                             <td style="background: #eee; font-weight:bold;">Title</td>                           
  14.                         </tr>
  15.                     </thead>
  16.                      <tbody>                        
  17.                         <template for:each={conObjItem.data} for:item="con">
  18.                             <tr key={con.Id}>
  19.                                 <td>{con.Name}</td>
  20.                                 <td>{con.Email}</td>
  21.                                 <td>{con.Phone}</td>
  22.                                 <td>{con.Title}</td>                                
  23.                             </tr>
  24.                         </template>                           
  25.                      </tbody>
  26.                  </table>
  27.  
  28.             </template>
  29.             <template if:true={conObjItem.error}>
  30.                 {contacts.error}
  31.             </template>
  32.             <br/>
  33.             <br/>
  34.    <!--Start RelatedTopics Section-->
  35. <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">
  36.  
  37.             <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>
  38.  
  39.             <br/><br/>
  40.             <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>
  41.             <div style="display:block; overflow:hidden;"> 
  42.                 <div style="width: 50%; float:left; display:inline-block">
  43.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  44.                         <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>
  45.                         <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>
  46.                         <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>
  47.                         <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>
  48.                         <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>
  49.                     </ul>
  50.             </div>
  51.  
  52.             <div style="width: 50%; float:left; display:inline-block">
  53.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  54.                         <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>
  55.                         <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>
  56.                         <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>
  57.                         <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>
  58.                         <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>
  59.                     </ul>
  60.                 </div>
  61.                <div style="clear:both;"></div> 
  62.                <br/>
  63.                 <div class="youtubeIcon">
  64.                     <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>
  65.                 </div>
  66.     </div>
  67.  
  68. </div>
  69.  
  70.   <!--End RelatedTopics Section-->
  71.         </div>
  72.     </lightning-card>
  73. </template>

Create Lightning Web Component JavaScript →

Step 2:- Create Lightning Web Component : lwcTrueFalseData.js

SFDX:Lightning Web Component >> New >> lwcTrueFalseData.js

lwcTrueFalseData.js [LWC JavaScript File]

  1.   import { LightningElement, wire } from 'lwc';
  2.   import objContactList from '@salesforce/apex/lwcTrueFalseDataCtrl.objContactList';
  3.   export default class LwcTrueFalseData extends LightningElement {    
  4.       @wire(objContactList) conObjItem;
  5.   }

Create Lightning Web Component Meta XML →

Step 3:- Create Lightning Web Component : lwcTrueFalseData.js-meta.xml

SFDX:Lightning Web Component >> New >> lwcTrueFalseData.js-meta.xml

lwcTrueFalseData.js-meta.xml [LWC Meta Data XML]

  1.   <?xml version="1.0" encoding="UTF-8"?>
  2. <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  3.     <apiVersion>45.0</apiVersion>
  4.     <isExposed>true</isExposed>
  5.     <targets> 
  6.         <target>lightning__AppPage</target>
  7.         <target>lightning__RecordPage</target>
  8.         <target>lightning__HomePage</target>
  9.     </targets>
  10. </LightningComponentBundle>

Create Apex Class Controller →

Step 4:- Create Apex Class : lwcTrueFalseDataCtrl.cls

From Developer Console >> File >> New >> Apex Class

lwcTrueFalseDataCtrl.cls [Apex Class Controller]

  1.    public WITH sharing class lwcTrueFalseDataCtrl {
  2.     @AuraEnabled(cacheable=TRUE)
  3.     public static List<Contact> objContactList() {
  4.         List<Contact> conList = [SELECT Id, Name, FirstName, LastName, Email, Phone,Title, Description FROM Contact WHERE Email !=NULL];
  5.         RETURN conList;
  6.     }
  7. }

 

Further post that would you like to learn in Salesforce

 

how to check if condition in lwc -- w3web.net

 

TechW3web:- To know more, Use this Link


 

FAQ (Frequently Asked Questions)

What are directives in LWC?

A directive is a special attribute that adds dynamic behavior to an HTML template. Use this directive to iterate over an array and render a list. Use this directive to access the current item.

What is iterator in LWC?

terator. If you want add special behavior to the first or last item in a list, use the iterator directive, iterator:iteratorName={array}. Use the iterator directive on a template tag.

Why do we use slots in LWC?

Slots in LWC are useful to make Lightning Web Component reusable and more flexible. It is also used to create a template in Lightning Web Component where we can create dynamic sections where the markup can be populated dynamically.

Related Topics | You May Also Like

 
Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 
  

Our Free Courses →

👉 Get Free Course →

📌 Salesforce Administrators

📌 Salesforce Lightning Flow Builder

📌 Salesforce Record Trigger Flow Builder
👉 Get Free Course →

📌 Aura Lightning Framework

📌 Lightning Web Component (LWC)

📌 Rest APIs Integration


Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

Leave a Comment