Hi All
I have want to change the background color of my <div> elements based on a value in the bound data as I'm iterating the records from a task.
Basically if the status = Open then background white else grey. I thought this would be using the lwc if / else but that seems to be only true or false and I can't work out how to do this using a getter.
Any ideas would be greatly appreciated. One possibility I thought to use a view model populated at the controller level, and include boolean properties for this. I assume it's probably much simper but I can't find examples.
<template for:each={taskList} for:item="tsk"> <li class="slds-item" key={tsk.id}> <div class="slds-grid slds-wrap"> <div class="slds-col slds-size_2-of-3"> <span style="font-weight:bold">{tsk.Who.Name}</span> </div> <div class="slds-col slds-size_1-of-3"> <span style="font-weight:bold">{tsk.CreatedDate}</span> </div> <div class="slds-size_3-of-3 slds-p-top_small"> {tsk.Description} </div> </div> </li> </template>
#Salesforce Developer
Hello, Have you tried using CSS in your component to define the styles for different status. That is the simplest solution.