Angular Changing Row Color when Preview Button is Clicked

November 25, 2021

In my code, I have a table and a button for every row where the user can preview the items. Since the table contains a lot of elements, when the preview button is clicked, I want the row color to become yellow. Right now, I couldn’t succeed in that with the way I tried. What should I do to achieve what I want?

HTML:

<button mat-icon-button class="sidebar-toggle" (click)="preview(row)" [ngClass]="{'yellow' : EditIndex == i}">
<mat-icon>pageview</mat-icon>
</button>

TS:

 preview(labPeriod: ILabPeriod) {
        this.labPeriodPreview = undefined;
        this._labService
            .getLabAnalysisTestResultsList(labPeriod.LabPeriodId)
            .subscribe((response: ILabConditionResult[]) => {
                this.labAnalysis.LabConditionResults = response;
                labPeriod.LabAnalysis = this.labAnalysis;
                this.labPeriodPreview = labPeriod;
                this._fuseSidebarService
                    .getSidebar("analysis-detail-period-preview")
                    .open();
            });
    }

>Solution :

Try to add extra property to row object named isYellow.If has undefined or false value class yellow will not displayed.
HTML:

<button mat-icon-button class="sidebar-toggle" (click)="preview(row)" [ngClass]="{'yellow' : row.isYellow}">
<mat-icon>pageview</mat-icon>
</button>

Ts:

 preview(labPeriod: ILabPeriod) {
//new
//todo loop through all rows and set isYellow to false
labPeriod.isYellow = true;
//new
        this.labPeriodPreview = undefined;
        this._labService
            .getLabAnalysisTestResultsList(labPeriod.LabPeriodId)
            .subscribe((response: ILabConditionResult[]) => {
                this.labAnalysis.LabConditionResults = response;
                labPeriod.LabAnalysis = this.labAnalysis;
                this.labPeriodPreview = labPeriod;
                this._fuseSidebarService
                    .getSidebar("analysis-detail-period-preview")
                    .open();
            });
    }