Reputation: 1
i have designed a custom grid and i want to highlight the row on selection but it is not working. I am not able to figure this out why this is happening. Below is the part of custom grid where for i have added class highlighted and the condition on which row is selected.
//this is the html. Here is the logic :
<tbody>
<tr *ngFor="let row of data; let i = index" (click)="onRowClick(i, row)" [class.highlighted]="selectedRowIndex === i">
<th scope="row" *ngIf="showCheckboxColumn">
<input type="checkbox" [checked]="row.selected" (change)="toggleCheckbox(row)" />
</th>
<td *ngFor="let column of columns">{{ row[column.key] }}</td>
</tr>
</tbody>
I want to highlight the selected row.
TS:
onRowClick(rowIndex: number, row: any ) {
this.selectedRowIndex = rowIndex;
this.selectRow.emit(row);
this.cdr.detectChanges();
console.log(this.selectedRowIndex);
}
CSS:
.highlight {
background-color: #8b2323;
}
Upvotes: 0
Views: 167