Angular Material. to highlight a table row on mouse over

Question

we are using Angular Material table for our app:

https://material.angular.io/components/table/overview

<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

could you please to show how to highlight a row on mouse hover?

Answer 1

Add some CSS with the :hover selector to the mat-row elements:

.mat-row:hover {
  background-color: red;
}

StackBlitz demo

Answer 2

You can do this styling the component in your theme file:

 @mixin newName-theme($dark-theme)

    mat-table tbody tr:hover{
    cursor: pointer;
    background: #b4b4b433;
  }

 @include newName-theme($dark-theme);

you can find more examples here

Answer 3

in my case .mat-row:hover didn't work, it was highlighting the whole table. this works for me:

  tr.mat-row:hover {
      background-color: yellow;
  }

Answer 4

Angular Material currently has that feature here but if you want to stylize more, here is my solution

Answer 5

This worked for me. I applied Bootstrap 4 class .table-hover to Angular material table.

<table class="table-hover" mat-table>...</table>