Angular 4 Material table highlight a row

Question

I\'m looking for a good way to highlight the whole a row in md-table.
Should I do directive or what?

Answer 1

This will allow you to select multiple rows if the row is not previously selected and on clicking again it will deselect it.

HTML

<mat-row *matRowDef="let row; columns: displayedColumns;"
  (click)="findOut(row)"[style.background]="highlightedRows.indexOf(row) != -1 ? 'lightgrey' : ''"></mat-row>

Type Script

Create an array

highlightedRows = [];

Define the findOut function

findOut(row){
  if(this.highlightedRows.indexOf(row) === -1){
    this.highlightedRows.push(row);
    }
    else{
    
      this.highlightedRows[this.highlightedRows.indexOf(row)] = -1;
    }
    
  }