0

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?

  • 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 '19 at 12:29
  • Ok....I have added an Image & a line below it @crmprogdev – Mohit Kulkarni Oct 10 '19 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 '19 at 17:07
  • I have added more code between <template> @PhilW – Mohit Kulkarni Oct 11 '19 at 5:24
1

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!

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.