1

I want to change values of text/numbers dynamically depending upon certain conditions.

(3 colors - Red, Yellow, Green)

enter image description here

So like depending upon value of numbers (like if its greater than 10 i want to show maybe green color & below 10 i want to show yellow color)

I tried using:

<template if:true={data} > 10> 
  <template for:each={Consumer.data} for:item="cons">
    <div class="slds-grid slds-m-around_small">
                    <div class="slds-col slds-size_1-of-3"
                        style="color:green;font-weight:bold;font-size: 35px;text-align:center">{cons.CIBIL_Score__c}</div>
                    <div class="slds-col slds-size_1-of-3"
                        style="color:green;font-weight:bold;font-size: 35px;text-decoration: underline;text-align:center">
                        #{cons.Total_PAN_Cards__c}
                    </div>
                    <div class="slds-col slds-size_1-of-3"
                        style="color:orange;font-weight:bold;font-size: 35px;text-decoration: underline;text-align:center">
                        #{cons.Enquiries_In_Last_3_Months__c}
                    </div>
    </div>
  </template>
</template> 

But you can't add conditional operators in this.

Can anyone suggest any other method?

4
  • 2
    Don't try to change the template. Instead use CSS3. You'll want to change the CSS3 class that's applied to the text dynamically. Without more details, none of us can tell you how or what to do.
    – crmprogdev
    Oct 10, 2019 at 12:29
  • Ok....I have added an Image & a line below it @crmprogdev
    – Mohit K
    Oct 10, 2019 at 14:00
  • Please add more of the template in use to allow someone to answer you in a way that doesn't make assumptions. For example, the ability to impact elements in your template by applying CSS depends on whether your template is full of simple HTML markup or whether you are using nested (standard or custom) components - basically you cannot apply CSS to the content of nested components due to the way LWC uses shadow doms.
    – Phil W
    Oct 10, 2019 at 17:07
  • I have added more code between <template> @PhilW
    – Mohit K
    Oct 11, 2019 at 5:24

2 Answers 2

3

You can use the JavaScript getters to compute the css value.

But, as you have the elements showing in a loop, I would suggest you create a child component to show the details and have getters dynamic css.

childComponent.html

<template>
    <div class={totalCardsClass}>
        {consumer.Total_PAN_Cards__c}
    </div>
</template>

childComponent.js

import { LightningElement, api } from "lwc";

export default class StackExDynamicCSS extends LightningElement {
  @api consumer;

  get totalCardsClass() {
    return `slds-col slds-size_1-of-3 slds-text-align_center slds-text-title_bold ${
      this.consumer.Total_PAN_Cards__c > 10 ? "green" : "orange"
    }`;
  }
}

childComponent.css

.green{
    color:green;
}
.orange{
    color:orange;
}

In your parent component html

<template if:true={data} > 
  <template for:each={Consumer.data} for:item="cons">
    <div class="slds-grid slds-m-around_small">
      <c-child-component key={item.id} consumer={item}>
      </c-child-component>
    </div>
  </template>
</template> 

I hope this helps!

2

I found a solution for my requirement here.

I directly returned the this CSS line color:variableName from Apex class itself.

I stored this value in a variable in JS, and then used that variable in HTML as inline CSS.

It works perfectly.

enter image description here

1
  • 1
    Can you include line of code that you use for this one. The html component, js and css.
    – mokh223
    Sep 20, 2021 at 1:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .