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

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>

score 9 · Answer 1 · answered Jun 28 '17 at 12:30

9

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.

answered Jun 28 '17 at 12:30

Ondra Koupil

1,034
6
9

1

Unfortunately I can't do that. I'm using ng-select which uses this class ui-select-toggle internally. I want to modify this class properties based on condition. – ABGR Jun 28 '17 at 12:32
Can you change wrapper's class of something around of the ng-select? If so, you can use the same technique, only to parent element: .suspended .ui-select-toggle { background: red; } etc. And then change the class of angular component inside:

– Ondra Koupil Jun 28 '17 at 12:35
This is how that looks. Even if I change the wrapper, that doesn't affect . – ABGR Jun 28 '17 at 12:38

score 3 · Answer 2 · edited Jun 28 '17 at 12:55

3

In your case you must create 3 styles and you use the directive

[NgClass] = "{style1: condition, style2: condition, style3: condition}

edited Jun 28 '17 at 12:55

ilse2005

11,189
5
51
75

answered Jun 28 '17 at 12:32

hassan bassi

41
1
3

score 1 · Answer 3 · answered Jun 28 '17 at 13:51

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.

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

3 Answers3