Reputation: 1180
I been trying to apply background color with ngClass to a mat-list and mat-list-item. If the condition is true, the background color is yellow else it stays normal white. When I just apply the regular
style="background-color:yellow"
in my html code, all the mat-list- item cells have a yellow background color.
I changed it the following which does not work
[ngClass]="myData.hasAlert ? 'highlight-color' : 'normal-color'"
[ngClass]="{'highlight-color' : myData.hasAlert }"
as a test, I even try ng-style="{ highlight : myData.hasAlert }" but nothing works.
Here is my code
<div class="ng-container" >
<mat-list [ngClass]="test.IsNotRedAlert ? 'my-list-black-font' : 'my-list-red-font'">
<!-- insert the subtotals-->
<mat-list-item
fxLayoutAlign="end"
class="metric-possition"
*ngFor="let myData of AllData"
class="background-color:yellow">
{{myData.balance}}</span>
</mat-list-item>
</mat-list>
</div>
at first, I added the css class to the mat-list ngClass but it change all the child mat-list-item to yellow background color under the mat-list. I need to only apply the background to certain mat-list-item cell if the condition of myData.hasAlert is true.
I tried with the following css
.highlight .mat-list-item {
background-color: yellow;
}
.highlight {
background-color: yellow;
}
any help is appreciated. Thanks.
Upvotes: 2
Views: 2548
Reputation: 14699
Instead of ngClass
, you can use this syntax:
<mat-list [class.my-list-black-font]="test.IsNotRedAlert">
Upvotes: 0
Reputation: 3095
Your class declaration is invalid.
Change to below code
<div class="ng-container">
<mat-list>
<!-- insert the subtotals-->
<mat-list-item *ngFor="let myData of allData"
[ngClass]="{'highlight':myData.hasAlert}">
{{myData.balance}}
</mat-list-item>
</mat-list>
</div>
Upvotes: 0
Reputation: 1845
Using ngClass
, this is the correct syntax you should use according to the documentation:
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
So in your case, that would be:
<mat-list-item [ngClass]="{'yellow-background': myData.hasAlert}">
And in your css file:
.yellow-background {
background-color: yellow;
}
Upvotes: 2