Как передать параметр из Angular в CSS в таблице HTML

Question

У меня есть HTML-таблица в веб-приложении Angular.Получите данные из базы данных через службу и отобразите их в виде текста.

Один из столбцов - «Состояние», поэтому мне нужно представить эту переменную не как текст, а как кружок определенного цвета, поэтому, если эта ячейказначение «зеленый», оно должно отображаться зеленым кружком.

Вот что у меня есть.

CSS (часть стилей компонентов):

:host ::ng-deep td.circle { 
  text-align: center;
  font-size: 0;
  background-color: RED;  <---  need to pass param here
}

Я определяюэтот столбец как:

.circle {
  border-radius: 50%;
  height: 24px;
  width: 24px;
}

HTML:

<app-table [attrs]="serviceapi" [monthSelected]="monthSelected" ></app-table>

TS для этой таблицы: в конструкторе:

this.data =  {
  headers: [],
  rows: []
};

ngOnInit() {
  this.tableMetricsService.getTableMetrics(
     JSON.parse(this.attrs).api,
     this.monthSelected
  ).subscribe(response => {
    this.data = response;
    }
  );
}

Любая идея, как "перевести" значение ячейкив цвет фона CSS?

TIA,

Олег.

Answer 1

Вот что у меня сработало:
<div *ngIf="cell.styleClass == 'circle'" [ngStyle]="{'background-color': cell.value}" [ngClass]="cell.styleClass"> </div>

Answer 2

Вы можете поместить атрибут данных в HTML и написать соответствующий селектор:

[data-status="green"] {
  background: green;
}

[data-status="red"] {
  background: red;
}

<div data-status="green">Green</div>
<div data-status="red">Red</div>

Но я не вижу никакого преимущества в этом подходе по сравнению с использованием обычного класса CSS:

.green {
  background: green;
}

.red {
  background: red;
}

  <div class="green">Green</div>
  <div class="red">Red</div>