function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
K Vijendhar 1K Vijendhar 1 

render html table in lightning web component based on condition

hello everyone, 

can someone please help me to fix the following issue lighting web component, 

1) i am using soql query to get the records from the salesforce wiring in javascript. 
    here i have one field --> selection__c,
    now my requirement is if the selection is true then i have to table row in green if its false need to show color in red;
    now my code is like below
    
     
<table>
        <th>
          <td> name <td>
          <td> name <td>
          <td> name <td>
          <td> name <td>
        <th>
        <templete if:true ={selection">
            
              <tr style="background:lightpink;> 
            <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>              </tr>
                  
            <tr>
            </templete>
            <templete if:false ={selection">
            
              <tr style="background:green;>  
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
                  
            <tr>
            </templete>


    now my requirement is, I don't want to use the same code under the template for false and true conditions, 
    i will have to select the color based on the true or false condition. 
    
    can someone please suggest me how to achieve it in lighting web component 
your help is appreciated, thanks for your help advance. 
Fabrice Challier 12Fabrice Challier 12

Hi,
not sure to perfectly understand you quesion. If I'm right, you would like to have a dynamic style , what you could set is something like this :

in your html, replace <tr style="background:green;>   with <tr style={aTrackValue}>  
in you js, you just have to implement the rules in order to populate aTrackValue with the expected result according to your condition

this way, you don't even need to use template within the html

Fabrice