how to disable matRipple on a div when clicking buttons inside that div?

user_80932 0
Viewed 996

I'm creating this image upload component with angular 11

I have a drop zone div with matRipple so whenever users drop a file it will show the ripple effect. inside that div I have buttons to rotate left and right. when I click on those buttons the ripple effect of the drop zone div is also triggered. is there a way to disable that ? so if a user click a button in that div, the ripple effect of that div won't occur ? I thought that by adding event.stopPropagation() to the buttons event handlers it will stop it, but it didn't.

this is my component:

<div class="container">
  <div class="box" style="width: 264px; height: 264px;transition: transform 0.5s" [style.transform]="'rotate(' + this.imageRotation + 'deg)'">
    <img style="max-width: 264px; max-height: 264px; position: relative" [src]="selectedFile?.src ? selectedFile?.src : previewImageUrl ? previewImageUrl : null" /></div>
  <div class="box stack-top">
    <div class="dropzone" comTuxinUpArea (fileDropped)="processFile($event)" matRipple>
      <input type="file" id="fileDropRef" accept="image/jpeg,image/png,image/webp" (change)="processFile($event.target)" />
      <h3 i18n>drag and drop file here</h3>
      <h3 i18n>or</h3>
      <label for="fileDropRef" i18n>Browse for file</label>
      <div fxLayout="row" fxLayoutAlign="center center" id="rotate-div">
        <button mat-icon-button *ngIf="this.selectedFile" (click)="rotateLeft()"><mat-icon>rotate_left</mat-icon></button>
        <button mat-icon-button *ngIf="this.selectedFile" (click)="rotateRight()"><mat-icon>rotate_right</mat-icon></button>
      </div>
    </div>
  </div>

the rotation buttons event handlers:

 rotateLeft() {
    this.imageRotation+=90;
  }

  rotateRight() {
    this.imageRotation-=90;
  }
stoppropagation angular-material angular
2 Answers

Another solution little bit tricky and less fancy it's disable matRipple by default directly from the template and handle the parent element click event manually:

my-app.component.html

<div *ngFor="let item of items; index as i" matRipple [matRippleDisabled]="true" (click)="toggleView(i)">
  ...
  <button mat-button (click)="$event.stopPropagation(); doYourStuff()"></button>
</div>

my-app.component.ts

@ViewChildren(MatRipple) public matRipples!:QueryList<MatRipple>;

public toggleView(i:number):void {
  this.matRipples.get(i)!.launch({ centered: true });
}

It works better than the solution of @rishabhsharma because works even with touchscreen (mouse less, so there is no cursor events) devices.

Hope it helps to someone.

user_109110320

Use the [matRippleDisabled]="someVariable" on your div. And on your buttons you can change the value of someVariable between true and false when you hover over the button.

On your buttons use : (mouseenter)="someVariable=true" (mouseleave)="someVariable=false" to enable or disable ripple effect on the outer div.

user_150173250
Related