Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Material. to highlight a table row on mouse over

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?

like image 984
Vladyslav Plakhuta Avatar asked Apr 09 '18 19:04

Vladyslav Plakhuta


4 Answers

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

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

StackBlitz demo

like image 136
p4r1 Avatar answered Sep 30 '22 03:09

p4r1


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

like image 21
Sandy Veliz Avatar answered Sep 30 '22 01:09

Sandy Veliz


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;
  }
like image 28
Sebastian Castaldi Avatar answered Sep 30 '22 01:09

Sebastian Castaldi


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

like image 30
John Osorio Avatar answered Sep 30 '22 02:09

John Osorio