Angular 2 - change the Table TR color

Hello Everybody,

Working on a Angular project and I have a table which is populated with information pulled from a database. besides pulling in first name and last name etc it also pulls in a color code such as #808080 and the color varies depending on the user.

objective: highlighted the records with the color code that came with the user record.
how do I integrate the background color pulled from the database into the TR tag?

any help you can provide me would be greatly appreciated.

same code:

	<tr class=active *ngFor="let key of objectKeys"   **Array[key].record color** > 
		<th scope=row>{{Array[key].firstName}}</th> 

You can bind data to element properties with square brackets:

<tr [style.color]="Array[key].record.color"><!-- ... --></tr>

Hi m3g4p0p,

thanks for the assistance but that only changed the font color.

I ended up adding the color to each TD tag as such:

unfortunately my approach disabled the hover over affect but thats a debugging for another day, one problem at a

not the most cleanest coding but it seems to work. your approach did add the color but it only colored the fonts.

If you find or know a better way to color the records with the hover over please pass it on.

thanks again for the replay.

If you want to change the background color, you can set style.backgroundColor – just like with regular JS.

There seems to be some code missing?

hi m3g4p0p,

I tried your suggestion and still not working.

not sure if its important but I am using getbootstrap and I’m assuming that has something to do with the problem. I did a quick experiment outside of getbootstrap and your suggestion does work so something from getbootstrap is preventing it from changing the color.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.