CODEWITHSUNDEEP
angularrowselectionhighlightonrowclick
Kshitij Chaudhary
Kshitij Chaudhary

Reputation: 1

Issue with highlighting the selected row in angular

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

Answers (0)

Related Questions