How to Highlight a Selected Row in *Ngfor

How to highlight a selected row in *ngFor?

There are plenty of solutions to do this, one of them is you can store the current company when clicked.

In the *ngFor you check if the current item is the currentCompany and you add the class highlighted or whatever class you wish if its the same company.

export class TableComponent {

  public currentCompany;

  public selectCompany(event: any, item: any) {

    this.currentCompany = item.name;
  }

}

And then on your template:

<tr *ngFor="let item of companies" (click)="selectCompany($event, item)" 
 [class.highlighted]="item.name === currentCompany">

--

Another solution if you wish to have multiple highlighted companies you can add a property highlighted to your item. Then on selectCompany() you just set the property to true. On your check you do [class.highlighted]="item.highlighted".

Highlight rows using ngFor in Angular Ionic based on condition

Change
[ngClass]="(count-1==i)?'newMsg':'oldMsg'" to
[ngClass]="(count-1>=i)?'newMsg':'oldMsg'"

Angular ngFor - Change CSS of the selected row instead of all rows

From your code, you are sharing selRow for each row, hence when you tick the checkbox in a row, other rows' checkboxes will also automatically checked.

Instead, what you need are:

1. selRows: An array to store selected index.
2. toggleSelectedRows: An method to add/remove the index from selRows.
3. isSelectedRow: Check whether the index is added in selRows.

selRows: number[] = [];

toggleSelectedRows(i: number) {
  let index = this.selRows.findIndex((x) => x == i);

  if (index == -1) this.selRows.push(i);
  else this.selRows.splice(index, 1);
}

isSelectedRow(i: number) {
  return this.selRows.findIndex((x) => x == i) > -1;
}

<tr
  *ngFor="let user of users; let i = index"
  [ngClass]="isSelectedRow(i) ? 'selRow' : ''"
>
  <td class="checkbox-field">
    <input type="checkbox" (change)="toggleSelectedRows(i)" />
  </td>
  
  ...
</tr>

Sample StackBlitz Demo

How can I highlight on mouse click selected row of the table using Bootstrap 4 and Angular 6?

A simple way is just to add one attribute like:
isSelected: boolean to you dataRows when one or more of them is selected;

listClick(event, newValue, cell) {
    cell.isSelected = !cell.isSelected;
    this.UploaderService.getFileName(newValue[1])
}

but i highly recommend you to use this excellent data table in angular
ngxDataTable

hope it help.

Highlight table row when clicked in angular

If only highlight single row item case:

<tr mat-row *matRowDef="let row; columns: displayedColumns;let index = index" (click)="clickEvent(index)" [class.blue]="index == cindex"></tr>

cindex: number
clickEvent(index) {
    this.cindex = index
}

Highlight selected row in primeng table without checking the checbox

I was able to achieve this by maintaining a variable highlight that gets the clicked row value and assigning the highlight class only to rows where this value is equal to that of the clicked row.

<ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr class="some-class"  [class.ui-state-highlight]="rowData === highlighted">
            <td>
                <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td>
            <td *ngFor="let col of columns">
            
                <a (click)="highlighted = rowData"> {{rowData[col.field]}}</a>
            </td>
        </tr>
    </ng-template>

Updated Stackblitz here.

Highlighting selected elements in angular *ngFor

change your template to this:

<div class="border-box">
    <div  *ngFor="let item of quarterDataList">
      <h2>{{item.year}}</h2>
      <div class="item-hover" *ngFor="let count of item.quarterData;let i = index" (click)="setClickedRow((i+'_'+item.year))" [class.active]="((i+'_'+item.year)) == selectedRow">
        <br>
       {{count.view}}-{{count.count}}
    </div>
    </div>

  </div>

How to toggle background color of rows in *ngFor in Angular / TypeScript?

You can put dummy property in your object and handle it on click.

<tr *ngFor="let ApiDataFile of filteredApiDataFiles; let idx=index; let even=even"
    [style.background-color]="ApiDataFile.rowClicked ? 'yellow' : (even ? 'red' : 'green')"
    (click)="ApiDataFile.rowClicked = !ApiDataFile.rowClicked">
      <td>{{ ApiDataFile.name }}</td>
      <td>{{ ApiDataFile.surname }}</td>
    </tr>

---

Related Topics