My code includes a list where each row has a button to open a sidebar. Due to the large number of elements in the list, I want the background color of the row to turn yellow when the button is clicked, as a way to indicate what has been selected. Currently, when I click the button, the entire list turns yellow. How can I resolve this issue and achieve the desired behavior?
HTML:
<div class="content">
<div fxLayout="row">
<!-- CONTENT -->
<div fxFlex class="px-8" fxLayout="column" fusePerfectScrollbar>
<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>
Reference </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-d...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';
}
}
openSidebar(name: string, stockEntryId: number): void {
//this.previewStockEntryId = stockEntryId;
this._fuseSidebarService.getSidebar(name).open();
}