Dynamically change the style of an undeclared html child component in Angular

I have following markup

<tr *ngFor='let activity of pagedWorkflowActivities' style="background-color:{{activity.status == 'Pending' ? 'red' : 'green'}}">
.
.
.
.
</tr>

As it says, if activity.status field is pending then make background color red otherwise green. But it doesn't work. After inspecting I found it renders it like

<tr ng-reflect-style="unsafe">

[style.background-color]="activity.status == 'Pending' ? 'red' : 'green'"

or

[ngStyle]="{'backgroundColor': activity.status == 'Pending' ? 'red' : 'green' }"

Try this one:

[ngStyle]="{'border': user?.keyResults.percentage > 50 ? '3px solid green' : '3px solid red' }"

parent.template.html

<div class="parent__container">
  <app-child></app-child>
</div>

parent.component.css

.parent__container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: peru;
  width: 300px;
  height: 300px;
}

child.template.html

<div class="child__container"></div>

child.component.css

.child__container {
  background-color: green;
  width: 150px;
  height: 150px;
}

parent.component.css

.parent__container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: peru;
  width: 300px;
  height: 300px;
}

.parent__container.alert .child__container {
  background-color: darkred;
}

Both host binding and ngStyles provide great ways to dynamically update styles. But what happens if Angular deems our style value unsafe, and we get this warning?:

WARNING: sanitizing unsafe style value {some value}