CODEWITHSUNDEEP
cssangulartypescript
baronming
baronming

Reputation: 258

Typescript How to change TH row background color with CSS

Quite simple as question, but I read a lot of other answer and none of them satisfy me. So my problem is that I have a table and I want to change background color of rows and header depends on the TEAM object, each team have a specific color.

I have a dropdown list giving a list of teams. When I select a team, I'm able to modify my variable and put the name inside my variable and the color inside another variable.

In my HTML for the component , I have :

    <!-- Header row third group -->
<ng-container matColumnDef="header-row-third-group">
  <th mat-header-cell *matHeaderCellDef [attr.colspan]="5" class="tableHeaderCellDivThirdrRow"> {{teamName(2)}}
  </th>
</ng-container>

the CSS file :

.tableHeaderCellDivThirdrRow { 
   background-color: green;  
}

I pass the teamName1 and the teamColor to the component. I'm calling a function that grab the name from my variable receive from the main component:

TS file :

@Input() teamName1: string;
@Input() teamColor1: string;

public teamName(_teamId) {
if (_teamId == 1) {
  return this.teamName1
}
if (_teamId == 2) {
  return this.teamName2
}

}

So in my component I can easily print the team name. But I want in my TS file, changing my CSS background-color: from green to the parameter teamColor1.

Right now I'm using a SCSS file, (I Read that I can't modify a SCSS file), but I can change it for a CSS file if it's easier. Also almost answer that I read has color pre-defined in the CSS file. I don't want that because if I add a team with a new color I don't want to came to change the CSS file.

Thanks for your help.

Upvotes: 1

Views: 1122

Answers (1)

NeNaD
NeNaD

Reputation: 20354

You can try this:

<th mat-header-cell [style.background-color]="teamColor1" *matHeaderCellDef [attr.colspan]="5"> {{teamName(2)}} </th>

Upvotes: 2

Related Questions