Как сделать динамические c css цветные заливочные коробки в html?

Question

На изображении ниже у меня есть mat_icon как 3 маленьких коробочки. Здесь мне нужно заполнить цвет на основе status_name.

Например:

1. status_name не запущен, необходимо заполнить красным цветом в одном поле
2. status_name начато производство, необходимо заполнить два Маленькие коробки с желтым цветом
3. status_name завершено производство, необходимо заполнить 3 коробки с зеленым цветом .. Как мы можем сделать это динамически.

 <ng-container matColumnDef="process">
            <th mat-header-cell *matHeaderCellDef> </th>
            <td mat-cell *matCellDef="let element">
              <div>{{element.mlc_status?.status_name}}</div>
               <div> <mat-icon>crop_7_5</mat-icon>
                <mat-icon>crop_7_5</mat-icon>
                <mat-icon>crop_7_5</mat-icon></div>
             </td>
          </ng-container>

[![Mentioned Image][1]][1]


**Update:**

Here's the [stackblitz][2] requested in comments.


  [1]: https://i.stack.imgur.com/nb4t4.png
  [2]: https://stackblitz.com/edit/angular-ewuxsm

Answer 1

Что касается стекаблика, приведенного в разделе комментариев к комментарию, то становится ясно, что OP пытается добиться результата создания цветов в каждом блоке на отдельном уровне,

Таким образом, вы могли бы сделать это используйте [ngStyle] для условного рендеринга background-color на основе состояния для блоков.

Условие первого блока:

(Принимает все три состояния Не начато, производство запущено и завершено (красный, желтый и зеленый))

<div class="box" [ngStyle]="{'background-color':    
   element.status_name == 'Not started' ? 'red' : 
   element.status_name == 'Production started' ? 'yellow' :
   element.status_name == 'Completed' ? 'green' : null
 }"></div>

Состояние второго блока:

(Принимает Производство начало и завершение (желтый и зеленый цвета))

 <div class="box" [ngStyle]="{'background-color': 
  element.status_name == 'Production started' ? 'yellow' :
  element.status_name == 'Completed' ? 'green' : null
 }"></div>

Состояние третьего поля:

(Принимает Выполнено (только зеленый цвет))

 <div class="box" [ngStyle]="{'background-color': 
 element.status_name == 'Completed' ? 'green' : null
 }"></div>

Рабочий Stackblitz