I need to change the color of an iconic button when it is clicked. The default color is the primary color, but when the button is clicked, it should change to red. This functionality is working correctly. After clicking the button, two hidden buttons should appear - a cancel button and a save button. This part is also working fine. However, when I click the cancel button, the color of the button should revert back to the primary color, but instead the cancel button just closes and the color remains red.
<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>
// Clicking on this button changes its color and shows two additional 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);
}
// Clicking this button changes its color to red
cancel(): void {
this.showButtons = false;
}
// Clicking cancel should hide the buttons and change the color back to primary
save() {
this.Service.datalist(data.Id).subscribe(
data => {
this.dataList = data;
console.log(data);
});
}
// This is the save button Please assist me with this issue