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
Merci 10Merci 10 

how to change style to this element in LWC

I have the following requirement. I have to change styles of the second element rendered of this list, i tried a solution to do that but doesn't work, can you help me please?

data = {
                  issues: [
                                  {
                                         'chapter' :  'something1'
                                         'posiion':  '2A'
                                  },
                                 {
                                          'chapter': 'something2',
                                          'position' : '3A'
                                 },
                                 {
                                           'chapter : 'something3',
                                           'position': '4A'
                                 }
                                      ]
             }

html code:

<template for:each={data.issues} for:item="item" for-index="index">
             <h3 class ={dinamicClass} > {index} {item.chaper} </h3>
             <h3 claas ={dinamicClass} >{index} {item.position} </h3>
</template>

output: 
                          0 something1     0 2A
                          1 something2     1 3A
                          2 something3     3 3A

the idea is to modificate the second row, in bold and bigger.

I try this in JS but doesnt not work

@api index;

get dinamicClass(){
  return this.index == 2 ? 'slds_xxxxxxx_large' : slds_xxxxxxx_small'
}


Any idea to can implement to solve this?  Thanks
Best Answer chosen by Merci 10
Maharajan CMaharajan C
Yes it's possible...
  
get result(){
        let jsondata = [];
        this.data.issues.forEach((obj, index) => {
            //console.log( ' ++++++ ' + index);
            obj.classstyle = (index == 1) ? 'slds-text-heading_large' : (index == 2) ? 'slds-text-color_error' : 'slds-text-heading_small';    
            //console.log( ' ++++++ ' + JSON.stringify(obj));
            jsondata.push(obj);
        });
        //console.log( ' ++++++ ' + JSON.stringify(jsondata));
        return jsondata;
    }

Thanks,
Maharajan.C

All Answers

Maharajan CMaharajan C
Hi Merci,

You have to handle this in Javascript... It is better to handle in JS...

Use the below code for your reference:

HTML:
  
<template>
    <lightning-card  variant="Narrow"  title="Hello Card" icon-name="standard:account">
        <template for:each={result} for:item="item" for:index="index">
            <h3 class={item.classstyle} key={item.index}> {index} {item.chapter} {item.position}</h3>
        </template>
    </lightning-card>
</template>

JS:
  
import { LightningElement } from 'lwc';

export default class DevForumCSSexample extends LightningElement {

    data = {
        issues: [
                        {
                               'chapter' :  'something1',
                               'position':  '2A'
                        },
                       {
                                'chapter': 'something2',
                                'position' : '3A'
                       },
                       {
                                 'chapter' : 'something3',
                                 'position': '4A'
                       }
                            ]
   };

    get result(){
        let jsondata = [];
        this.data.issues.forEach((obj, index) => {
            obj.classstyle = index == 1 ? 'slds-text-heading_large' : 'slds-text-heading_small';    
            jsondata.push(obj);
        });
        //console.log( ' ++++++ ' + JSON.stringify(jsondata));
        return jsondata;
    }

}


XML:
  
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>


User-added image
Thanks,
Maharajan.C

 
Merci 10Merci 10
Hi, Maharajan excellent, thank a lot fo your help!! Just one more question, If i would to add other style to other element in this list besides the index 1, por ejample give style to index 1 as index 2, is it possible in the same code?
Maharajan CMaharajan C
Yes it's possible...
  
get result(){
        let jsondata = [];
        this.data.issues.forEach((obj, index) => {
            //console.log( ' ++++++ ' + index);
            obj.classstyle = (index == 1) ? 'slds-text-heading_large' : (index == 2) ? 'slds-text-color_error' : 'slds-text-heading_small';    
            //console.log( ' ++++++ ' + JSON.stringify(obj));
            jsondata.push(obj);
        });
        //console.log( ' ++++++ ' + JSON.stringify(jsondata));
        return jsondata;
    }

Thanks,
Maharajan.C
This was selected as the best answer
Merci 10Merci 10
Great!!  Thank you!!