How to add left border on click of row in mdtable angular material2

Question

I am using angular material2 in my project. I have used the table component. I want to add the left border to current clicked row only of the table.

There are hover and active selectors that I can use. But active selector keeps border only if the row is active that is only the time while the mouse is in clicked state. But I want to add it even if the user releases the mouse. How can I achieve that?

Answer 1

<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row> allows to add class and event to the whole row.

I added a ngClass in it to show highlight class when row.id matches with the selectedRowIndex . Also, added a click event to pass the row information to the component to set the selectedRowIndex .

Html:

<md-row *cdkRowDef="let row; columns: displayedColumns;" 
         [ngClass]="{'highlight': selectedRowIndex == row.id}"
         (click)="highlight(row)">
</md-row>

component:

selectedRowIndex: number = -1

highlight(row){
  // console.log(row);
  this.selectedRowIndex = row.id;
}

css:

.highlight{
  border-left: 5px solid #42A948; /* green */
}

Plunker demo