CODEWITHSUNDEEP
angularng-bootstrap
TSG
TSG

Reputation: 4617

Cannot find a differ supporting object when adding a class to div

I have created a simple ngBootstrap modal window, as follows:

<ng-template #alertModal let-c="close" let-d="dismiss">
  <div class="modal-header" [ngClass]="titleStyle">
    <h4 class="modal-title">
      <i id="icon" class="fa fa-1x" [ngClass]="icon" aria-hidden="true"></i>{{title}}
    </h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true" [ngStyle]="titleStyle"><i class="fa fa-1x fa-window-close" aria-hidden="true"></i></span>
    </button>
  </div>
  <div class="modal-body" [innerHtml]="body">
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

and I apply classes to the title dynamically like this:

this.titleStyle = 'bg-warning text-white';
this.icon = 'fa-exclamation-circle';

So adding classes to the icon element works fine, but adding the classes to the first div element fails like this: (If I replace the titeStyle string with '' it shows without error, but without formatting):

Error: Cannot find a differ supporting object 'bg-warning text-white' at KeyValueDiffers.webpackJsonp.../../../core/@angular/core.es5.js.KeyValueD

Upvotes: 0

Views: 1083

Answers (1)

amal
amal

Reputation: 3170

It seems like ngClass is not causing it to fail. Looks like you are assigning the same titleStyle to the ngStyle directive here,

<span aria-hidden="true" [ngStyle]="titleStyle"><i class="fa fa-1x fa-window-close" aria-hidden="true"></i></span>

Is that intended?

Upvotes: 1

Related Questions