I’m developing an Angular component that allows users to resize a div containing an iframe by dragging a resize handle. However, I’ve encountered an issue: the resizing stops when the mouse moves over the iframe during the drag operation. I am using Renderer2 to handle global mouse events.

<div class="resize-container">
    <div class="resize-content">
        <iframe src="https://www.example.com"  frameborder="0"
            #iframe></iframe>
    </div>
    <div class="resize-handle" (mousedown)="onResizeStart($event)"></div>
</div>

@Component({
  selector: 'app-resize-handler',
  standalone: true,
  imports: [],
  templateUrl: './resize-handler.component.html',
  styleUrls: ['./resize-handler.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ResizeHandlerComponent implements OnDestroy {
  private isResizing = false;
  private startX = 0;
  private startWidth = 0;
  private mouseMoveListener!: () => void;
  private mouseUpListener!: () => void;

  @ViewChild('iframe') iframe!: ElementRef<HTMLIFrameElement>;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

  onResizeStart(event: MouseEvent): void {
    this.isResizing = true;
    this.startX = event.clientX;
    this.startWidth = this.iframe.nativeElement.offsetWidth;
    this.mouseMoveListener = this.renderer.listen('window', 'mousemove', (e) => this.onResize(e));
    this.mouseUpListener = this.renderer.listen('window', 'mouseup', () => this.onResizeEnd());
    event.preventDefault();
  }

  onResize(event: MouseEvent): void {
    if (this.isResizing) {
      const dx = event.clientX - this.startX;
      const newWidth = this.startWidth + dx;
      this.iframe.nativeElement.style.width = `${newWidth}px`;
    }
  }

  onResizeEnd(): void {
    this.isResizing = false;
    if (this.mouseMoveListener) this.mouseMoveListener();
    if (this.mouseUpListener) this.mouseUpListener();
  }

  ngOnDestroy(): void {
    this.onResizeEnd();
  }
}

I’ve ensured that mouse events are captured globally using Renderer2, yet the issue persists when the mouse hovers over the iframe. How can I maintain the resizing functionality smoothly even when the mouse is over the iframe during the drag operation?

Angular version :17.1.0