title: change colour of a mat button when clicked in angular
body: <p>Hi I am developing an angular application. I want to create tabs, clicking on each calls a different function. I am using mat buttons for it. My code</p>
  
  <pre><code>
  &lt;div flexLayout="row"&gt;
      &lt;button mat-flat-button [color]="this.paletteColour" (click)="change()"&gt;B2-L1&lt;/button&gt;
      &lt;button mat-flat-button [color]="this.paletteColour" (click)="change()"&gt;B2-L3&lt;/button&gt;
      &lt;button mat-flat-button [color]="this.paletteColour" (click)="change()"&gt;B2-L3&lt;/button&gt;
      &lt;button mat-flat-button [color]="this.paletteColour" (click)="change()"&gt;B2-L4&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>.ts file</p>
  
  <pre><code> paletteColour
    change() {
    this.paletteColour = 'warn';
    }
  </code></pre>
  
  <p>.css file</p>
  
  <pre><code>.mat-flat-button {
      background-color: grey;
      border-radius: 0 px !important;;  
  }
  
  .mat-button, .mat-flat-button, .mat-icon-button, .mat-stroked-button { border-radius: 0px; }
  </code></pre>
  
  <p>but this changes colour of all the buttons when clicked on one button. How do I change the color of only one button that has been clicked and rest all remain the same colour. </p>
  
  <p>PS : Colour change is working only when i comment background-colour in css.</p>