title: Angular Material - How to change button color in run time
body: <p>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.</p>
  
  <p>I already read the documentation: <a href="https://material.angular.io/components/button/overview" rel="nofollow noreferrer">https://material.angular.io/components/button/overview</a></p>
  
  <p>And about themes it only says:</p>
  
  <p><code>Buttons can be colored in terms of the current theme using the color property to set the background color to primary, accent, or warn.</code></p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;button
         *ngFor="let link of links; let i = index"
         mat-raised-button
         color="primary"
         (click)="selectedIndex = i"
         [routerLink]="link.routerLink"&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>I don't even know if it is possible, but something like this is what I'm looking for:</p>
  
  <pre><code>&lt;button
         *ngFor="let link of links; let i = index"
         mat-raised-button
         (click)="selectedIndex = i"
         [color]="selectedIndex === i ? primary : warm"
         [routerLink]="link.routerLink"&gt;
  &lt;/button&gt;
  </code></pre>