CODEWITHSUNDEEP
angularangular-materialangular-material-table
Kisinga
Kisinga

Reputation: 1729

Angular mat-table cancel ripple

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?

Upvotes: 2

Views: 1560

Answers (2)

Rafi Henig
Rafi Henig

Reputation: 6424

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

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

Upvotes: 2

yujinpan
yujinpan

Reputation: 519

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>

Upvotes: 4

Related Questions