LWC dynamic css based on iterated item

Question

I am iterating over data and want to set element class based on value. Is there are way to check if element.Id exist? If true is not an option for me.

<template for:each={data} for:item="element" for:index="inx">
  <p class = {testClass}>
    {element.Id}
  </p>                                               
</template>

js

get testClass(){ 
   if(element.Id) {
       return 'someClass'
   } else {
       return 'anotherClass'
   }
}

Answer 1

In your data object you can add a additional key value pair of class based on element Id.

You can iterate and add className key like -> data.className = data.Id ? 'idclass':'withoutIdClass'.

And you can reference that directly in your html. class = {element.className}.

Add respective css of those classes.