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

Question

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;
  }

Answer 1

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.