Now change color of table items to percent

src/app/components/shared/list-statistic/list-statistic.component.html

@@ -10,12 +10,16 @@
 
   <ng-container matColumnDef="content">
     <mat-header-cell *matHeaderCellDef> Content </mat-header-cell>
-    <mat-cell *matCellDef="let cp"> {{cp.content.subject}}</mat-cell>
+    <mat-cell *matCellDef="let cp" [ngClass]="{'positiveC' : cp.percent > 85,
+      'okayC' : cp.percent > 49 && cp.percent < 85, 'negativeC' : cp.percent < 50,
+      'emptyCC' : cp.percent < 0 }">{{cp.content.subject}}</mat-cell>
   </ng-container>
 
   <ng-container matColumnDef="percentage">
     <mat-header-cell *matHeaderCellDef> Percentage </mat-header-cell>
-    <mat-cell *matCellDef="let cp">{{cp.percent.toFixed() * ' %'}}</mat-cell>
+    <mat-cell *matCellDef="let cp" [ngClass]="{'positiveC' : cp.percent > 85,
+      'okayC' : cp.percent > 49 && cp.percent < 85, 'negativeC' : cp.percent < 50,
+      'emptyC' : cp.percent < 0 }">{{cp.percent.toFixed() + ' %'}}</mat-cell>
   </ng-container>
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

src/app/components/shared/list-statistic/list-statistic.component.scss

@@ -13,9 +13,44 @@ mat-header-cell {
 }
 
 mat-cell {
-  background-color: #ffe082;
+  background-color: #E0E0E0;
 }
 
 mat-toolbar {
   height: 15px;
+  color: white;
 }
+
+.positiveC {
+  background-color: #AED581;
+}
+
+.negativeC {
+  background-color: #FF8A65;
+}
+
+.okayC {
+  background-color: #FFD54F;
+}
+
+.positiveP {
+  background-color: #AED581 !important;
+}
+
+.negativeP {
+  background-color: #FF8A65 !important;
+}
+
+.okayP {
+  background-color: #FFB74D !important;
+}
+
+.emptyC {
+  color: #E0E0E0;
+  background: #E0E0E0;
+}
+
+.emptyCC {
+  background: #E0E0E0;
+}
+