I want to know how can I add dynamic class name to my <div> based on item values in angular?

Example

item status is open add class bg-success Or item status is pending add class bg-warning

code

Component

const badgeColors = {
  'Open': 'bg-primary',
  'pending': 'bg-warning',
  'Finished': 'bg-success',
  'Expired': 'bg-danger'
}

HTML

<div class="col-md-3" *ngFor="let item of listOfData" :key="item.id">
  <div class="card">
    <div class="otherClasses bg-warning"></div> <-- I need to change this static `bg-warning` to dynamic `badgeColors`
  </div>
</div>

[ngClass]="displayDynamicColour(item.status)"

const badgeColors = {
  'Open': 'bg-primary',
  'pending': 'bg-warning',
  'Finished': 'bg-success',
  'Expired': 'bg-danger'
}

displayDynamicColour(item){
return this.badgeColors[item];
}

<div [ngClass]="{'bg-success': (status === open), 'bg-warning': (status === pending)}"> </div>