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
Css - How to Make the Checkbox and Label in One Line
How to Remove Outline in Bootstrap 4
How to Embed HTML Formatting Inside of a <Textarea> Tag
How to Declare a Variable in a Template in Angular
Large File Upload Though HTML Form (More Than 2 Gb)
How to Remove the Space Between Inline/Inline-Block Elements
How to Overlay One Div Over Another Div
How to Override Bootstrap CSS Styles
How to Style the Parent Element When Hovering a Child Element
Html and CSS Are Not Linking/ Communicating
Html Select Only One Checkbox in a Group
How to Use Two Ngfor in HTML Angular 4
Background Size for Mobile Devices
How to Divide a Page in Three Vertical Sections
Flexbox: Center Horizontally and Vertically