CODEWITHSUNDEEP
csstwitter-bootstrapangularfont-awesomeng-class
coder87
coder87

Reputation: 167

bootstrap css not getting rendered properly in ngClass

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.

Error screenshot

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.

enter image description here

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.

Working screenshot Text Color CSS

Here CSS overriding doesn't happen.

overriding CSS

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.

Upvotes: 0

Views: 531

Answers (1)

Lon Yang
Lon Yang

Reputation: 696

<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>

Upvotes: 1

Related Questions