title: Changing css class properties based on condition (*ngIf in angular 2)
body: <p>I want my css class to change based on condition. I'm trying to use this:</p>
  
  <pre><code>&lt;div *ngIf="dropDownBg==='Active'"&gt;
  &lt;style type="text/css"&gt;
  .ui-select-toggle{
      background: green !important;
    }
  &lt;/style&gt;
  
  &lt;/div&gt;
  
  
  &lt;div *ngIf="dropDownBg==='Suspended'"&gt;
  &lt;style type="text/css"&gt;
  .ui-select-toggle{
      background: red !important;
    }
  &lt;/style&gt;
  
  &lt;/div&gt;
  
  &lt;div *ngIf="dropDownBg==='Disabled'"&gt;
  &lt;style type="text/css"&gt;
  .ui-select-toggle{
      background: grey !important;
    }
  &lt;/style&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>But this doesn't work. By default browser seems to be ignoring and <code>divs</code> with <code>*ngIf</code> and only the last style overrides the others. Below is the browser interpretation:</p>
  
  <p><a href="https://i.stack.imgur.com/C1xoj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C1xoj.png" alt="enter image description here"></a>
  UPDATE: This scenario arose because I'm using <code>ng-select</code> dropdown which internally uses class 'ui-select-toggle'over which I don't have any control. So <strong>WEIRD</strong> people downvoting this question, please take a note of that.</p>
  
  <p>This is the code:</p>
  
  <pre><code>&lt;div style="min-width: 200px;position: absolute;right: 0"&gt;
             &lt;ng-select 
                     [items]="items"
                      (selected)="selected($event)"
                      [active]="selectedItem"
                       (removed)="removed($event)"
                    placeholder="Select a number"&gt;
            &lt;/ng-select&gt;
  &lt;/div&gt;
  </code></pre>