html - 如何在点击时更改按钮颜色？

Question

我在点击它时更改了图标按钮颜色，默认图标按钮颜色是原色当我点击图标按钮时它应该将原色更改为红色。这对我来说工作正常，现在点击隐藏按钮后将显示一个是取消按钮，另一个是保存按钮到这里它现在工作正常，当我点击取消按钮时，红色按钮应该变为主要但取消按钮正在关闭并且标志性按钮的颜色没有改变

<kendo-grid-command-column headerClass="data-list-header-cell" title="Delete" width="5" filterable="false">
    <ng-template kendoGridCellTemplate let-site>
      <button mat-icon-button color="primary" (click)="onDelete(data)" [ngClass]="{'selectedRemoveButton':data.isClicked}">
        <mat-icon>remove_circle</mat-icon>
      </button>
      
      // these are icon button if clicked on this button it will change color and also show 2 buttons cancel and save.
      
      <ng-container *ngIf="showButtons">
    <span class="rightButtons">
      <button class="mat-button menu-button" (click)="cancel()">
        <mat-icon>block</mat-icon> CANCEL
      </button>
      <button class="mat-button primary-button" (click)=" save()">
        SAVE
      </button>
    </span>
  </ng-container>

.selectedRemoveButton {
  color: red
}

 onDelete(data: any) {
    if (data.isClicked) {
      this.dataList.push(data);
    }
    data.isClicked = !data.isClicked;
    this.showButtons = !this.showButtons;
    console.log(data.Id);
  }
  
  //these is where i am first clicking on button when i click on these button color will change to red
  
  cancel(): void {
    this.showButtons = false;
  }
  //if presse on cancel button is disappearing but color have to change red to primary
  save() {
   
      this.Service.datalist(data.Id).subscribe(
          data => {
            this.dataList = data;
            console.log(data);
          });
    
  }
  //this is save button 

请帮帮我

Answer 1

使用 ngClass 动态添加类。

<button class="mat-button menu-button" [ngClass]="removeStyles" (click)="cancel()">

removeStyles = "";
cancel(): void {
  this.showButtons = false;
  this.removeStyles= "selectedRemoveButton"
}