+ Start a Discussion
EagerToLearnEagerToLearn 

How to use LWC Condition Checking against two values

Its seem that you have to go around the barn every which way I turn with SF LWC!  I am trying to do a simple condition check but I don't want to check true to a boolean value such as below.  I want to check a data records field value to a hard-coded value in the HTML file.

<template if:true={mydata.data}>

I want to check the value of the of the data to a hardcoded value like...

<template for:each={mydata.data} for:item="d">
     <div key={d.Message__c}>
         <div if:m.Message_Style__c = "Success">
             <strong>{m.Message__c}</strong>
         </div>
     </div>
</template>


I tried...

<div if:true={m.Message_Style__c} = "Success">

and

<div if:true={m.Message_Style__c} == "Success">

and other variations with no luck.

Just seem like there is so much lacking capability to easily do conditional markup in LWC.  I am really new to LWC and not much on javascript or HTML so that could be some of my issue! :)

What I want to do is have the data on a record control the color theme.  So if a user picks from the picklist "Info" it will use the slds-theme_info, or if the record has "Success" selected in the picklist then the data is displayed using the slds-theme_sucess.

Thanks for your help.
Abhishek BansalAbhishek Bansal
Can you please try the below options:
<template if:true={m.Message_Style__c = "Success"}>
	<div>
		 <strong>{m.Message__c}</strong>
	</div>
</template>

OR:
<template if:true={m.Message_Style__c == "Success"}>
	<div>
		 <strong>{m.Message__c}</strong>
	</div>
</template>

One of them should work.

Thanks,
Abhishek Bansal. 
Alain CabonAlain Cabon
The problem with LWC is that you cannot use an expression but just a boolean property.

Here, it is a blocking problem so you need to add the results of all the tests: d.Message_Style__c == "Success" in mydata.data as a new boolean variable isSuccess in the controller js.
 
<template>
    <table>
        <template for:each={mydata.data} for:item="d">
            <tr key={d.Name}>
                <td>{d.Name} > </td>
                <td>
                    <div if:true={d.isSuccess}>
                        <strong>{d.Message_Style__c}</strong>
                    </div>
                    <div if:false={d.isSuccess}>
                        {d.Message_Style__c}
                    </div>
                </td>
            </tr>
        </template>
    </table>
</template>
 
import { LightningElement, api } from 'lwc';

export default class Looptests extends LightningElement {

  @api
  get mydata() {

      let mydata1 = {data:[{Name:"test1",Message_Style__c:"Success"},{Name:"test2",Message_Style__c:"Failure"},{Name:"test3",Message_Style__c:"Success"}]};

      mydata1.data.forEach(element => {
          if (element.Message_Style__c == 'Success') {element.isSuccess = true} else {element.isSuccess = false}
      });
      return mydata1;
  }
}

 
Alain CabonAlain Cabon
You can use the local development server for these tests:

User-added image

 
EagerToLearnEagerToLearn

Abhishek Bansal - that won't work as I have tried that and it seems as Alain Cabon has stated the test can only test against a value not a compared evaluation that equates to a boolean then against the TRUE or FALSE.  I find this crazy.  

Alain Cabon, I have more to lean about understanding Javascript do I do not fully understand you potential solution.

In the mean time, last night what I did was produced apex methods (4 of them) for each color condition I am interested in.  Each method reads the database record and compares if the value matches the expected value that the given method wants and if so it returns true; otherwise false.  Only one of those methods will be able to return TRUE.  I setup a Template Conditional Check (4 of them) against those boolean values from the apex methods to determine what color to display.  Again, to me this a a long way around the barn plus I know it is not efficient because i am hitting the database for each of those color methods!  I did try to have public List at the top of the class so I could call the query once and pass it to the color methods so I only hit the database once but I get different types of errors.  I will work on trying to get that to work for efficiency.

Just makes no sense that since I have the data at the HTML level from the looping perspective that I should be able to compare a value of the database against a hard-code value of "Success" or "Blue" or "Red", etc.  I used the SF themes for color not so much as for error trapping.

I have it working and it appears pretty fast on the screen but it is clear hitting the database (query) in 4 different methods just to set one of them true is not efficient but it will do for now until I can get better at Javascript or call it once and pass the list to each method.