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: 
You can use :before and :after

```
td:hover::before {
    background-color: #ffa;
    content: '';
    height: 100%;
    left: -5000px;
    position: absolute;
    top: 0;
    width: 10000px;
    z-index: -2;
}

td:hover::after {
    background-color: #ffa;
    content: '';
    height: 10000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1;
}

```

Full working example in Fiddle:
<https://jsfiddle.net/0vm7pkj4/1/>
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.