ngClass Angular 4 with function inside

Question

I am trying like this it is working but it is taking only the color for the text and not with background.

Here is my code.

<div class="costs-block" [ngClass]="{'positive' : Difference < 0}">
  {{Difference | moneyFormat}}
</div>

$row-background-color: white;

.positive {
    background-color: red;
    color:white;
  }
.costs-block {
    @extend %common-block;
    @include center();
    @include justify-content(flex-end);
    margin-left: 10px;
    padding-right: 5px;
    width: 150px;
  }
%common-block {
  @extend .vp-row;
  background-color: $row-background-color;
  margin-top: 1px;
  margin-bottom: 1px;
  min-height: $content-height;
  border: solid thin $border-color;
  border-radius: 3px;
}

Answer 1

Something like this:

<div class="costs-block" [ngClass]="Difference < 0 ? 'positive' : 'regular'">
    {{Difference | moneyFormat}}
</div>


    $row-background-color: white;

    .positive {
        background-color: red;
        color:white;
      }

    .regular{
        background-color: $row-background-color;
    }

    .costs-block {
        @extend %common-block;
        @include center();
        @include justify-content(flex-end);
        margin-left: 10px;
        padding-right: 5px;
        width: 150px;
      }

    %common-block {
      @extend .vp-row;
      margin-top: 1px;
      margin-bottom: 1px;
      min-height: $content-height;
      border: solid thin $border-color;
      border-radius: 3px;
    }

Answer 2

Try this

.positive {
background-color: red !important;
color: white;