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>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>
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>
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.
