Angular Changing the Color of a Row on Button Click-CodePudding

In my code, I have a long list of elements and a button for sidebar. Since the list is too long, I want to remember where I have clicked. For that, I want the row color to change on button click. Here's what I have done so far. I've only managed to change the color of the whole table (pool-row). What should I do to only change the color of the selected row?

HTML:

<div fxLayout="column" fxLayoutAlign="end" class="mat-elevation-z4 responsive-grid">
                <div fxLayout="row" fxLayoutAlign="end" class="pr-4">
                    <mat-form-field fxFlex fxFlex.gt-sm="30">
                        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filtrele">
                    </mat-form-field>
                </div>
                <table mat-table [dataSource]="dataSource" matSort class="stock-table" id="pool-row">
                    <ng-container matColumnDef="Reference">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                            Belge No </th>
                        <td mat-cell *matCellDef="let row; let i = index">
                            <p *ngIf="controlReferanceColor(row)" style="color:red;">{{row.Reference}}
                            </p>
                            <p *ngIf="!controlReferanceColor(row)">{{row.Reference}}</p>
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="Actions">
                        <th mat-header-cell *matHeaderCellDef></th>
                        <td mat-cell *matCellDef="let row">
                            <a mat-icon-button matTooltip="Detay" *ngIf="row.SourceType?.Id != 32"
                                [routerLink]="getLink(row)" target="_blank">
                                <mat-icon>open_in_browser</mat-icon>
                            </a>
                            <button mat-icon-button matTooltip="Liste" *ngIf="row.SourceType?.Id == 32" id="list"
                                class="sidebar-toggle" (click)="getReferenceList('lab-test-detail-preview',row)">
                                <mat-icon>pageview</mat-icon>
                            </button>
                        </td>
                    </ng-container>                        
                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"
                        [ngClass]="{'amber-fg': controlReferanceColor(row) == true}"></tr>
                </table>
            </div>

TS:

getReferenceList(sidebarName: string, reference: IProcess) {
    if (reference && reference.Reference != "") {
        this.selectedProcessList = this._stockService.processList.find(
            (x) => x.Reference === reference.Reference
        ).ChildProcessList;
        this._fuseSidebarService.getSidebar(sidebarName).open();
    }
    document.getElementById('pool-row').style.backgroundColor = '#fced49';
}

CodePudding user response：

I would say all you need to do is to pass in your ngFor index into the click function:

(click)="getReferenceList('lab-test-detail-preview',row, i)"

In the function you save it into a field of the component

getReferenceList(sidebarName: string, reference: IProcess, index: number) {
  this.currentRow = index;
  // ...
}

And then apply styling (e.g. via applying a css class) in your template

<tr mat-row 
    *matRowDef="let row; columns: displayedColumns;"
    [class.red]="currentIndex === i"></tr>

CodePudding user response：

As Andi-Io said, pass the index into getReferenceList and set a property.

getReferenceList(sidebarName: string, reference: IProcess, index: number) {
  this.currentRow = index;
  // ...
}

(Remove the line with document.getElementById. You only ever want to manipulate the dom directly if not possible otherwise.)

Then in the template change the bottom line like this:

<tr mat-row *matRowDef="let row; let i = index; columns: displayedColumns;"
  [ngClass]="{'amber-fg': controlReferanceColor(row) == true, 'cur-row': i === currentRow}"></tr>

Note: You need to grab the index again.

Declare the respective class in you scss/css file.