Document limitation of matRipple on native table rows and possible solutions

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The ripple effect should be contained within the table row.

What is the current behavior?

When using <tr mat-row> in Angular 6 instead of <mat-row ...>, the ripple effect isn’t contained within its parent container. I believe this is caused by the fact that div (the container used for the ripple) is not a valid child of the tr element it’s applied to.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-myteuk

What is the use-case or motivation for changing an existing behavior?

N/A

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.x

[rocos-yishi]

  <table mat-table [dataSource]="items">
    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.name}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" matRipple></mat-row>
  </table>

That works for me. 😃

[simeyla]

Still not working?

You probably forgot imports: [ MatRippleModule ]