Changing css class properties based on condition (*ngIf in angular 2) - css

Question

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:
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>

Answer 1

You can't dynamically change stylesheet of the document like this. Instead, define classes for possible situations and change the toggle's class.
Try something like this:
.ui-select-toggle { /* whatever */ }
.ui-select-toggle.suspended { background: red; }
.ui-select-toggle.active { background: green; }
And then change class of the toggle:
<div
class="ui-select-toggle"
[class.suspended]="dropDownBg==='Suspended'"
[class.active]="dropDownBg==='Active'"
>
</div>
An element can have several CSS classes, so that you can define common properties in main class (ui-select-toggle) and extra properties specific for each state in the secondary class.

Answer 2

In your case you must create 3 styles
and you use the directive
[NgClass] = "{style1: condition, style2: condition, style3: condition}

Answer 3

If it's only one property (here being background), you can do this :
<div [style.background]="...">...</div>
In your case, it could be :
<div [style.background]="dropDownBg === 'Active' ? 'green' : dropDownBg === 'Suspended' ? : red : dropDownBg === 'Disabled' ? 'grey' : 'black'">...</div>
With black being your fallback color.