Bob.Tern
Posts: 11
Joined: Wed Nov 15, 2023 7:02 am

ListItem background color

Hi I have a listItem which I fill with a sqlsrver express api, I invoke service through a button The list item has 4 text component 1.id, 2.name, 3.state, 4.date I need the background of field #3 to change color depending on the value it has, example 1."CONFIRMED" = green, 2."PENDING" = red, 3."WAIT" = yellow. Can you help me with the code, the listItem is called "ListItem1" and the array is called "agendalist" and where should I write said code thank you very much for your help Regards Edgar Alvarez
aantsypau
Posts: 26
Joined: Wed May 24, 2023 7:57 am

Re: ListItem background color

The most easiest solution is adding custom property [style.--background] see attached image
Attachments
img-2023-12-13-12-05-41.png
img-2023-12-13-12-05-41.png (108.3 KiB) Viewed 20502 times
aantsypau
Posts: 26
Joined: Wed May 24, 2023 7:57 am

Re: ListItem background color

We record a video with explanation how to implement you task https://youtu.be/NU3AmptO3A0
AntonioGraca
Posts: 3
Joined: Thu Aug 20, 2020 11:48 pm

Re: ListItem background color

Hi

I use [ngClass], in common witth CSS
[ngClass]={'color1':list.field==='CONFIRMED', 'color2':list.field==='PENDING', 'color3': list.field==='WAIT'}
Image
Attachments
Captura de ecrã 2023-12-29 182953.png
Captura de ecrã 2023-12-29 182953.png (55.44 KiB) Viewed 16428 times

Return to “Issues”