Question: Im trying to highlight entire column in table on hover. 

Can someone help me how I can achieve this in angular2+

I need exactly like the below image

[![enter image description here](https://i.stack.imgur.com/EoIhM.png)](https://i.stack.imgur.com/EoIhM.png)

reference image

Answer: 
I assume you're trying to have it so that you can click a row and have that row highlighted, similar for a column.

If so, you could try the following:

Create an array for columns that's equal in length to the number of columns, same for rows.
`tableRowHighlights: Array<boolean> = [];
tableColumnHighlights: Array<boolean> = [];`  

Fill them with false values, then, when generating your table, assign each cell a css class that will highlight it based on the row or column index:  

`[class.colSelected]="tableColumnHighlights[4]"` 

Now, when `tableColumnHighlights[4]` is true, every cell that has 4 specified will gain the `colSelected` class which will have your highlight.

Then you can set, on each cell, a click listener that alternates the status:  

`(click)="tableColumnHighlights[4] = !tablecolumnHighlights[4]"` 

Do the same thing for rows. You could also put the listener only on the thead elements for columns if you wished.

Hopefully this is what you were after.
Try to use hover effect through your table Class, hope this would help

```
.MyTable td:hover {
   background-color: #ccc;
}

```