I want my css class to change based on condition. I'm trying to use this:

```
<div *ngIf="dropDownBg==='Active'">
<style type="text/css">
.ui-select-toggle{
    background: green !important;
  }
</style>

</div>

<div *ngIf="dropDownBg==='Suspended'">
<style type="text/css">
.ui-select-toggle{
    background: red !important;
  }
</style>

</div>

<div *ngIf="dropDownBg==='Disabled'">
<style type="text/css">
.ui-select-toggle{
    background: grey !important;
  }
</style>

</div>

```

But this doesn't work. By default browser seems to be ignoring and `divs` with `*ngIf` and only the last style overrides the others. Below is the browser interpretation:

[![enter image description here](https://i.stack.imgur.com/C1xoj.png)](https://i.stack.imgur.com/C1xoj.png)
UPDATE: This scenario arose because I'm using `ng-select` dropdown which internally uses class 'ui-select-toggle'over which I don't have any control. So **WEIRD** people downvoting this question, please take a note of that.

This is the code:

```
<div style="min-width: 200px;position: absolute;right: 0">
           <ng-select 
                   [items]="items"
                    (selected)="selected($event)"
                    [active]="selectedItem"
                     (removed)="removed($event)"
                  placeholder="Select a number">
          </ng-select>
</div>

```