Using [ngStyle] to apply custom color to mat-raised-button

Question

I want to use a custom mat-button color style but it's not working when I combine it with an [ngStyle].

This is what I want:

html:

<button mat-raised-button
        [ngStyle]="getDirectionArrowStyle(item.label, 'ltr')"
        value="ltr"
        aria-label="Left To Right"
        (click)="setActiveDirection(item.label, 'ltr')">
   <mat-icon>east</mat-icon>
</button>

css:

.mat-arrow-selected {
  background-color: green;
  color: #fff;
}

.mat-arrow-deselected {
  background-color: red;
  color: #fff;
}

The transform is working fine but the color is not.

typescript:

getDirectionArrowStyle(label: string, directionValue: string) {
  const isActiveDirection = this.isActiveDirection(label, directionValue);
  const styles = {
    color: isActiveDirection ? 'arrow-selected' : 'arrow-deselected',
    transform: isActiveDirection ? 'scale(1.2)' : 'scale(0.5)'
  };
  return styles;
}

The html below works so the custom mat-button color is working.

html:

<button mat-raised-button
        color="arrow-selected"
        value="ltr"
        aria-label="Left To Right"
        (click)="setActiveDirection(item.label, 'ltr')">
   <mat-icon>east</mat-icon>
</button>

I could use an *ngIf="isActiveDirection(label, directionValue)" and have two button elements. One with color="arrow-selected" and the other with color="arrow-deselected" but the cleaner solution would be via the [ngStyle]. So I would be very happy if this is possible.

All help or tips are welcome.

`'arrow-selected'` is not a color -if you want to add a class you should use [ngClass] : https://angular.io/guide/built-in-directives#adding-and-removing-classes-with-ngclass — Eliseo, Jul 07 '21 at 08:16
I was trying to do the same as what was done here: https://stackoverflow.com/a/48015134/14939710 The last block of html in my question is working fine, this means that in that case 'arrow-selected' is recognized as a color. So I assumed angular would recognize it as a color as well when using [ngStyle]. The answer marked as solution is working. I thought [ngStyle] could do some extra angular magic in the background and that the functionality of [color] is integrated in [ngStyle]. But thanks to the explanation I now understand they are two different things. — thdir, Jul 07 '21 at 09:31

score 1 · Accepted Answer · answered Jul 07 '21 at 08:17

I presume your theme has those color names in it? The color attribute is special for the material controls. It is not CSS. ngStyle returns CSS.

Try:

<button mat-raised-button
        [ngStyle]="getDirectionArrowStyle(item.label, 'ltr')"
        [color]="getDirectionColour(item.label, 'ltr')"
        value="ltr"
        aria-label="Left To Right"
        (click)="setActiveDirection(item.label, 'ltr')">
   <mat-icon>east</mat-icon>
</button>

You'll need another function to get the colour name:

getDirectionColour(label: string, directionValue: string) {
  const isActiveDirection = this.isActiveDirection(label, directionValue);
  return isActiveDirection ? 'arrow-selected' : 'arrow-deselected';
}

Using [ngStyle] to apply custom color to mat-raised-button

1 Answers1