bootstrap css not getting rendered properly in ngClass

Question

I've following line of code for displaying a message in modal based on the modal type -

<div class="modal-body">
    <span class="fa sb-alert-icon" [ngClass]="{ 'fa-exclamation-circle text-danger': (type == error),'fa-exclamation-triangle text-warning': (type == alert)
     ,'fa-question-circle text-warning': (type == confirm), 'fa-info-circle text-info': (type == info)}">{{message}}</span>
</div>

Issue is that, i don't see proper text color for alert message with above conditions and its rendered as white.

In browser console I don't see 'text-warning' being rendered. But I do see the place where text color is set to white which is shown below.

However, if i change above condition to following -

<span class="fa sb-alert-icon" [ngClass]="{ 'fa-exclamation-circle text-danger': (type == error),'fa-exclamation-triangle text-warning': (type == alert)
     , 'fa-info-circle text-info': (type == info)}">{{message}}</span>

I see 'text-warning' css getting applied properly as shown below.

Here CSS overriding doesn't happen.

EDIT-1 :

.sb-alert-icon has following code -

.sb-alert-icon{
  font-size: medium;
  padding-right: 10px;
}

Not sure, if this is happening because -

1. using 'text-warning' css consecutively for both 'Alert' & 'Confirm' scenarios.
2. using both Font Awesome and bootstrap together.

Answer 1

<span class="fa sb-alert-icon" 
  [ngClass]="{
    'fa-exclamation-circle text-danger': type == error,
    'fa-exclamation-triangle': type == alert,
    'fa-info-circle text-info': type == info,
    'fa-question-circle': type == confirm,
    'text-warning': type == alert || type == confirm
   }">
   {{ type }} - {{ message }}
</span>