How do you set mat-icon color and background color separately using two ternary expressions?

Question

I have a mat icon I'd like to be a certain color depending on the URL of the user (which is dealt with in the boolean expression). I used a ternary expression to change the background color which worked fine, but when I added the second ternary expression to change the color of the image/icon itself the first expression stopped working, and the second expression does not either.

<button class="button-spacer" [style.background-color]="atAnnouncements ? 'black' : 'white'" routerLink="/announcements" mat-mini-fab
            matTooltip="Announcements">
                <mat-icon [ngStyle]="{'color': atAnnouncements ? '#D09B2C' : 'black'}">announcement</mat-icon>
            </button>

When leaving the ngStyle as a fixed color rather than ternary expression the first ternary works just fine.

So ideally, when atAnnouncements is true we have a black background color and the hex colored icon, and white background color and black icon when false.

does the same thing happen if you change the inner element to: `[style.color]="atAnnouncements ? '#D09B2C' : 'black'"`? Any console errors? — DanGo, Aug 05 '19 at 19:33
Why don't you just use a class on the button and set the colors through css? — pascalpuetz, Aug 05 '19 at 19:39
It does not work or break it but throws this message: vendor.js:71107 WARNING: sanitizing unsafe style value [object Object] (see http://g.co/ng/security#xss). — Salizmo Squeegee, Aug 05 '19 at 19:41
that ngstyle approch is not binding the property color but the css class called .color. Iguess u didnt define it. Use the same approach like before --> ```[style.color]="atAnnouncements ? '#D09B2C' : 'black'"``` — sagat, Aug 05 '19 at 19:59

sagat · Accepted Answer · 2019-08-05T21:44:35.577

Do this:

<button class="button-spacer" [style.background-color]="atAnnouncements ? 'black' : 'white'" routerLink="/announcements" mat-mini-fab
            matTooltip="Announcements">
                <mat-icon [ngClass]="{'true-color': atAnnouncements, 'false-color': !atAnnouncements  }">announcement</mat-icon>
            </button>

And in your css:

.true-color {
  color: green;
}

.false-color {
  color: red;
}

or

<button class="button-spacer" [ngStyle]="{'background-color': atAnnouncements ? 'black' : 'white' }" routerLink="/announcements" mat-mini-fab
            matTooltip="Announcements">
                <mat-icon [ngStyle]="{'color': atAnnouncements ? '#D09B2C' : 'black'}">announcement</mat-icon>
            </button>

or

<button class="button-spacer" [ngStyle]="{'background-color': atAnnouncements ? 'black' : 'white' }" routerLink="/announcements" mat-mini-fab
                matTooltip="Announcements">
                    <mat-icon [ngClass]="atAnnouncements ? 'true-color' : 'false-color'"">announcement</mat-icon>
                </button>

color test

score 0 · Answer 2 · answered Aug 05 '19 at 20:00

0

I would use [ngClass] rather than [ngStyle]. This will keep the code cleaner in the template.

<button class="button-spacer" [style.background-color]="atAnnouncements ? 'black' : 'white'" routerLink="/announcements" mat-mini-fab
            matTooltip="Announcements">
                <mat-icon [ngClass]="{'color': atAnnouncements ? '#D09B2C' : 'black'}">announcement</mat-icon>
</button>

Here's a link to a similar problem: Angular2 Doing an else with ngClass

If you want to still use [ngStyle]: Combine [NgStyle] With Condition (if..else)

answered Aug 05 '19 at 20:00

thenolin

1,013
3
10
28

I dont think that he had a color class defined in css, thats why he is binding hex color codes to the condition. – sagat Aug 05 '19 at 20:02
I'm saying he should create a class to bind to in the template - it's cleaner plus reusable – thenolin Aug 05 '19 at 20:02
It is, but u r not explaining that in the answer explicitly – sagat Aug 05 '19 at 20:03
Mate I have a question, r u sure that ur ngClass statement works? Cause this is giving me an error on stackblitz. Maybe leave out the curly brackets? or use these []? – sagat Aug 06 '19 at 08:34

How do you set mat-icon color and background color separately using two ternary expressions?

2 Answers2