CODEWITHSUNDEEP
htmlangularangular6
rannes
rannes

Reputation: 99

how to change color of button after clicking button in angular

i need to change button color into red (primary color to red color) after clicking button, please help me how to change color after clicking button.

 <td>
      <button mat-icon-button color="primary">
        <mat-icon>remove_circle</mat-icon>
      </button>
      </td>

Upvotes: 1

Views: 24077

Answers (3)

Sachin Shah
Sachin Shah

Reputation: 4533

Try this way

// .ts file  
flag : any = false;

btnClick(){
    this.flag = true;
}

Set css for color

::ng-deep .colorRed{
    color:red
}

In your HTML file 

  // To apply color on row just put ngClass on tr  
  <tr [ngClass]="{ 'colorRed' :flag }">
    <td>
      <button mat-icon-button color="primary" (click)="btnClick()">
          <mat-icon>remove_circle</mat-icon>
       </button>
     </td>
  </tr>

Upvotes: 2

blid
blid

Reputation: 1181

Since you're using @angular/material, you should bind to the color @Input of their component rather than just adding a css-class of your own.

That way you do not have to worry about css-priority and your code will not be fragile to changes in the @angular/material implementation of component color.

  <button mat-icon-button 
          [color]="buttonColor"
          (click)="buttonColor = 'warn'">
    <mat-icon>remove_circle</mat-icon>
  </button>

and in your component

   buttonColor: ThemePalette = 'primary';

If your warn-color is not red, then consider changing your theme or making a new theme.

Upvotes: 0

Harun Or Rashid
Harun Or Rashid

Reputation: 5947

Implement this logic in your code.

var isClicked = false;
.myClass{
  color : red;
}
<td>
      <button mat-icon-button color="primary" (click)="isClicked = !isClicked" [class.myClass]="isClicked">
        <mat-icon>remove_circle</mat-icon>
      </button>
      </td>

Upvotes: 8

Related Questions