Issues with color attribute of mdbBtn not updating with bind

Hello,

I'm trying to bind the color attribute of MdbBtn directive like this:

html:

    <div class="dropdown" mdbDropdown>
      <button type="button"
          mdbDropdownToggle mdbBtn
          [color]="statusColor"
          class="dropdown-toggle waves-light"
          style="width:170px;"
          mdbWavesEffect>
    {{ status }}
  </button>

  <div class="dropdown-menu dropdown-primary">
    <ng-container *ngFor="let value of statuses">
      <div class="divider dropdown-divider" *ngIf="value === 'canceled'"></div>
      <button class="dropdown-item"  (click)="changeStatus(value)">{{ value }}</button>
    </ng-container>
  </div>
</div>

When statusColor changes in the component.ts the color property seems not to be updated. For example if we do this:

changeStatus(newStatus) { 
        this.status = newStatus;
        statusColor = (newStatus === 'canceled') ? 'danger' : 'primary'
 }

Expected Behavior is color should toggle colors when the statusColor bind property changes.

Can someone look at this ?

Thank you so much,Jose Renteria