How to use assignment operator in conditional statement in LWC?
As per current release[Spring 19], you can not use assignment operator in conditional statement in html file of Lightning Web Component. That means, you can not put any condition in or the following syntax of html is invalid.
template if:true={count==4} — Invalid
To understand this exercise, we have created one LWC named “conditionalStatement“.
Step 1: First of all, we have updated the conditionalStatement.js-meta.xml to set the visibility in Lightning App Builder.
conditionalStatement.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="conditionalStatement"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__HomePage</target> <target>lightning__RecordPage</target> </targets> </LightningComponentBundle>
Step 2: Need to update the HTML file.
conditionalStatement.html
<template> <lightning-card title="Conditional Statement" icon-name="utility:check"> <lightning-layout> <lightning-layout-item padding="around-small"> <lightning-button variant="brand" label="Click Me" onclick={handleClicks}></lightning-button> </lightning-layout-item> <lightning-layout-item padding="around-small"> <template if:true={hasRendered}> WOW!! Appreciate your patience. </template> </lightning-layout-item> </lightning-layout> </lightning-card> </template>
After 4th time click, this html file will display the message as “WOW!! Appreciate your patience.“. So, we can check this with conditional statement along with number of clicks in , but this is not possible due to limitation. That’s why, we have declared the property named “hasRendered” of boolean type. This property will return true when user clicked 4 times as per the assignment. Let’s see in the js file.
Step 3: Need to update the JS file.
conditionalStatement.js
import { LightningElement,track } from 'lwc'; export default class ConditionalStatement extends LightningElement { //@track hasRendered; @track count=0; handleClicks(){ this.count++; /*if(this.count == 4) this.hasRendered = true;*/ } get hasRendered(){ // eslint-disable-next-line no-console console.log('count--->'+this.count); if(this.count === 4) return true; return false; } }
Here, we have declared handleClicks() method to count how many clicks are occurred by the user. Now, as discussed in last session, we have used get method of hasRendered property which will return true after 4th time click. Remember, for this we need to declare count as private reactive property.
Result
29,484 total views, 3 views today