Page 1 of 1

ListItem background color

Posted: Wed Dec 13, 2023 9:04 am
by Bob.Tern
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

Re: ListItem background color

Posted: Wed Dec 13, 2023 9:07 am
by aantsypau
The most easiest solution is adding custom property [style.--background] see attached image

Re: ListItem background color

Posted: Sun Dec 17, 2023 5:06 pm
by aantsypau
We record a video with explanation how to implement you task https://youtu.be/NU3AmptO3A0

Re: ListItem background color

Posted: Fri Dec 29, 2023 6:32 pm
by AntonioGraca
Hi

I use [ngClass], in common witth CSS
[ngClass]={'color1':list.field==='CONFIRMED', 'color2':list.field==='PENDING', 'color3': list.field==='WAIT'}
Image