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:

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

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 time.lol

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.
R

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.

r

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