Angular ngClass mat-list-item adding condition to apply background color

1
votes

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.

3
cssangularangular-materialbackground-color
class="background-color:yellow" is not valid format for class, for valid format check my answer - Ravi Sevta

3 Answers

1
votes

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;
}
0
votes

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>
0
votes

Instead of ngClass, you can use this syntax:

 <mat-list [class.my-list-black-font]="test.IsNotRedAlert">