Angular mat-table cancel ripple

Question

I have an angular-material table with a clickable row with matRipple effect. Within the table I have a button as one of the rows. When the button is clicked it emits an event, and so far I have stopped event propagation and this works well at preventing both elements from detecting the a click event. Is there a way of cancelling the ripple effect of the parent row momentarily ONLY when the button is clicked?

score 4 · Accepted Answer · answered Jan 24 '19 at 06:37

The ripple uses the mousedown and mouseup events, and you can disable or turn on the parent's ripple in both events:

  <div
    class="example-ripple-container mat-elevation-z4"
    matRipple
    [matRippleDisabled]="disabled"
  >
    <button (mousedown)="disabled=true" (mouseup)="disabled=false" mat-button>button</button>
  </div>

score 2 · Answer 2 · answered May 14 '21 at 14:35

2

Simply stop further propagation of the button's mousedown event using stopPropagation method, as demonstrated below:

<button (mousedown)="$event.stopPropagation()">

answered May 14 '21 at 14:35

Rafi Henig

5,950
2
16
36

Angular mat-table cancel ripple

2 Answers2