Angular Material Table - Apply Dynamically Background Color to a Row (Angular 2+)

Angular Material Table - Apply dynamically background color to a row (Angular 2+)

You can also use [ngClass] to achieve this:

<td [ngClass]="{
'is-white': data.STATUS === 'S',
'is-blue': data.STATUS === 'W',
'is-red': data.STATUS === 'E',
'is-green': data.STATUS === 'F'
}">...</td>

And then in your css:

td.is-white {
background: ...;
}

Et voilà ! Hope it helps to understand that you can achieve this with different solution.

EDIT

To your use, juste use the [ngClass] in the second <tr>

<tr mat-row *matRowDef="let element; columns: displayedColumns;" class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
[ngClass]="{
'is-white': element.STATUS === 'S',
'is-blue': element.STATUS === 'W',
'is-red': element.STATUS === 'E',
'is-green': element.STATUS === 'F'
}" (click)="log_message = onElementExpand(element); expandedElement = element;"></tr>

Add alternating rowcolor to Angular Material Table with expandable rows

You may try this CSS stylesheet. By default, all the rows (included detailed rows) will be background-color: white.

For every third & forth row (even row with its detailed row), background-color: #eee.

.mat-row {
background-color: white;
}

.mat-row:nth-child(4n-1), .mat-row:nth-child(4n) {
background-color: #eee;
}

Sample Solution on StackBlitz

How to set a material table cell's background color conditionally

There are so many ways to do it.
This is the one way to do it like in weight cell if value is greater than 10 then yellow color in background.

<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell [ngClass]="{clsWeight: element.weight > 10}" *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>

Here is the working demo

If you dont want to use ngClass then you can directly use the style like this

<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
<mat-cell [style.background-color]="element.weight > 10 ? 'yellow' : ''" *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>

Working Demo

table header background color change dynamically - Angular material

One of approach is to use Css Var and change variable value programatically in component.

Css

.mat-header-cell {
background: var(--background-color)
}

Component

export class AppComponent {
constructor()

changeColor() {
// set new color here
document.documentElement.style.setProperty(`--background-color`, 'red');
}
}

So when you change variable in css, browser will change value in .mat-header-cell class

Another approach is to use inline style background-color attribute on each mat-header-cell item.

In html

  <ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef [style.background-color]="color"> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

In component

export class TableBasicExample {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
color = 'green'

changeColor() {
this.color = 'red';
}

}

Example

Change row color in Angular Material table

I assume that you want to apply make-gold class when IsGranted value is true. If this is the case, try this:

<mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'make-gold': row.IsGranted }">

See also stackblitz demo.

EDIT

There is also a shorthand syntax:

<mat-row ... [class.make-gold]='row.IsGranted' [class.another-class]="true">

Alternate row colours angular material table

Use Following CSS in your .css or .scss file to set the different style for even/odd row:

.mat-row:nth-child(even){
background-color: red;
}

.mat-row:nth-child(odd){
background-color: black;
}

Set a unique design or color for the top 3 rows in a generated table in angular

Please try this in your table-basic-example.css

.mat-row:nth-child(-n+3) {
background-color: rebeccapurple;
}

or

::ng-deep .mat-table tbody tr:nth-child(-n+3) {
background-color: rebeccapurple;
}

or

::ng-deep .mat-table tbody .mat-row:nth-child(-n+3) {
background-color: rebeccapurple;
}


Related Topics



Leave a reply



Submit