Angular Material - How to change button color in run time

user_6061376 0
Viewed 3353

I'm crating a side bar menu using angular material. I did'nt find a way to change the button color based on some component property.

I already read the documentation: https://material.angular.io/components/button/overview

And about themes it only says:

Buttons can be colored in terms of the current theme using the color property to set the background color to primary, accent, or warn.

This is my code:

<button
       *ngFor="let link of links; let i = index"
       mat-raised-button
       color="primary"
       (click)="selectedIndex = i"
       [routerLink]="link.routerLink">
</button>

I don't even know if it is possible, but something like this is what I'm looking for:

<button
       *ngFor="let link of links; let i = index"
       mat-raised-button
       (click)="selectedIndex = i"
       [color]="selectedIndex === i ? primary : warm"
       [routerLink]="link.routerLink">
</button>
material-design angular-material angular
4 Answers
user_65811730

You have to surround the color theme name with quotes to pass it as a string:

[color]="selectedIndex === i ? 'primary' : 'warn'"

See this stackblitz for a demo.

user_10099220

Try this,change primary to 'primary' and warn to 'warn' , should have effect you want.

<button
   *ngFor="let link of links; let i = index"
   mat-raised-button
   (click)="selectedIndex = i"
   [color]="selectedIndex === i ? 'primary' : 'warn'"
   [routerLink]="link.routerLink">
 </button>
user_97985680

This can solve your problem, using single quotes instead of without it:

[color]="selectedIndex === i ? 'primary' : 'warn'"

user_109060570
Related