CODEWITHSUNDEEP
angularangular-materialmaterial-design
Thomaz Capra
Thomaz Capra

Reputation: 1063

Angular Material - How to change button color in run time

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>

Upvotes: 2

Views: 3962

Answers (4)

Iasmim Oliver
Iasmim Oliver

Reputation: 21

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

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

Upvotes: 2

Marshal
Marshal

Reputation: 11101

Very possible, you will need to pass string literals to your data binding [color]

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

Stackblitz

https://stackblitz.com/edit/angular-npzkiu?embed=1&file=app/button-overview-example.html

Upvotes: 7

Nenad Radak
Nenad Radak

Reputation: 3688

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>

Upvotes: 3

Martin Parenteau
Martin Parenteau

Reputation: 73761

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.

Upvotes: 3

Related Questions