refactor(multiple): use renderer for manual event bindings

Switches our manual calls into `addEventListener` to use the renderer instead so that tooling (e.g. the tracing service) gets notified about them.

Note that these changes only include the events that don't pass event options. The remaining events will be changed in a follow-up, because they require us to update to the latest `next` version of Angular.

Author: crisbeto

src/cdk/dialog/dialog-container.ts

@@ -33,6 +33,7 @@ import {
   Injector,
   NgZone,
   OnDestroy,
+  Renderer2,
   ViewChild,
   ViewEncapsulation,
   afterNextRender,
@@ -79,6 +80,7 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
   protected _ngZone = inject(NgZone);
   private _overlayRef = inject(OverlayRef);
   private _focusMonitor = inject(FocusMonitor);
+  private _renderer = inject(Renderer2);
 
   private _platform = inject(Platform);
   protected _document = inject(DOCUMENT, {optional: true})!;
@@ -223,13 +225,13 @@ export class CdkDialogContainer<C extends DialogConfig = DialogConfig>
       // The tabindex attribute should be removed to avoid navigating to that element again
       this._ngZone.runOutsideAngular(() => {
         const callback = () => {
-          element.removeEventListener('blur', callback);
-          element.removeEventListener('mousedown', callback);
+          deregisterBlur();
+          deregisterMousedown();
           element.removeAttribute('tabindex');
         };
 
-        element.addEventListener('blur', callback);
-        element.addEventListener('mousedown', callback);
+        const deregisterBlur = this._renderer.listen(element, 'blur', callback);
+        const deregisterMousedown = this._renderer.listen(element, 'mousedown', callback);
       });
     }
     element.focus(options);

src/cdk/drag-drop/drag-drop.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable, NgZone, ElementRef, inject} from '@angular/core';
+import {Injectable, NgZone, ElementRef, inject, RendererFactory2} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {ViewportRuler} from '@angular/cdk/scrolling';
 import {DragRef, DragRefConfig} from './drag-ref';
@@ -28,6 +28,7 @@ export class DragDrop {
   private _ngZone = inject(NgZone);
   private _viewportRuler = inject(ViewportRuler);
   private _dragDropRegistry = inject(DragDropRegistry);
+  private _renderer = inject(RendererFactory2).createRenderer(null, null);
 
   constructor(...args: unknown[]);
   constructor() {}
@@ -48,6 +49,7 @@ export class DragDrop {
       this._ngZone,
       this._viewportRuler,
       this._dragDropRegistry,
+      this._renderer,
     );
   }
 

src/cdk/drag-drop/drag-ref.ts

@@ -19,6 +19,7 @@ import {
   ElementRef,
   EmbeddedViewRef,
   NgZone,
+  Renderer2,
   TemplateRef,
   ViewContainerRef,
   signal,
@@ -378,6 +379,7 @@ export class DragRef<T = any> {
     private _ngZone: NgZone,
     private _viewportRuler: ViewportRuler,
     private _dragDropRegistry: DragDropRegistry,
+    private _renderer: Renderer2,
   ) {
     this.withRootElement(element).withParent(_config.parentDragRef || null);
     this._parentPositions = new ParentPositionTracker(_document);
@@ -853,6 +855,7 @@ export class DragRef<T = any> {
         this._pickupPositionOnPage,
         this._initialTransform,
         this._config.zIndex || 1000,
+        this._renderer,
       );
       this._preview.attach(this._getPreviewInsertionPoint(parent, shadowRoot));
 
@@ -1106,24 +1109,24 @@ export class DragRef<T = any> {
 
     return this._ngZone.runOutsideAngular(() => {
       return new Promise(resolve => {
-        const handler = ((event: TransitionEvent) => {
+        const handler = (event: TransitionEvent) => {
           if (
             !event ||
             (this._preview &&
               _getEventTarget(event) === this._preview.element &&
               event.propertyName === 'transform')
           ) {
-            this._preview?.removeEventListener('transitionend', handler);
+            cleanupListener();
             resolve();
             clearTimeout(timeout);
           }
-        }) as EventListenerOrEventListenerObject;
+        };
 
         // If a transition is short enough, the browser might not fire the `transitionend` event.
         // Since we know how long it's supposed to take, add a timeout with a 50% buffer that'll
         // fire if the transition hasn't completed when it was supposed to.
         const timeout = setTimeout(handler as Function, duration * 1.5);
-        this._preview!.addEventListener('transitionend', handler);
+        const cleanupListener = this._preview!.addEventListener('transitionend', handler);
       });
     });
   }

src/cdk/drag-drop/preview-ref.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {EmbeddedViewRef, TemplateRef, ViewContainerRef} from '@angular/core';
+import {EmbeddedViewRef, Renderer2, TemplateRef, ViewContainerRef} from '@angular/core';
 import {Direction} from '@angular/cdk/bidi';
 import {
   extendStyles,
@@ -56,6 +56,7 @@ export class PreviewRef {
     },
     private _initialTransform: string | null,
     private _zIndex: number,
+    private _renderer: Renderer2,
   ) {}
 
   attach(parent: HTMLElement): void {
@@ -91,12 +92,8 @@ export class PreviewRef {
     return getTransformTransitionDurationInMs(this._preview);
   }
 
-  addEventListener(name: string, handler: EventListenerOrEventListenerObject) {
-    this._preview.addEventListener(name, handler);
-  }
-
-  removeEventListener(name: string, handler: EventListenerOrEventListenerObject) {
-    this._preview.removeEventListener(name, handler);
+  addEventListener(name: string, handler: (event: any) => void): () => void {
+    return this._renderer.listen(this._preview, name, handler);
   }
 
   private _createPreview(): HTMLElement {

src/cdk/observers/private/shared-resize-observer.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
-import {inject, Injectable, NgZone, OnDestroy} from '@angular/core';
+import {inject, Injectable, NgZone, OnDestroy, RendererFactory2} from '@angular/core';
 import {Observable, Subject} from 'rxjs';
 import {filter, shareReplay, takeUntil} from 'rxjs/operators';
 
@@ -98,6 +98,8 @@ class SingleBoxSharedResizeObserver {
   providedIn: 'root',
 })
 export class SharedResizeObserver implements OnDestroy {
+  private _cleanupErrorListener: (() => void) | undefined;
+
   /** Map of box type to shared resize observer. */
   private _observers = new Map<ResizeObserverBoxOptions, SingleBoxSharedResizeObserver>();
 
@@ -107,7 +109,12 @@ export class SharedResizeObserver implements OnDestroy {
   constructor() {
     if (typeof ResizeObserver !== 'undefined' && (typeof ngDevMode === 'undefined' || ngDevMode)) {
       this._ngZone.runOutsideAngular(() => {
-        window.addEventListener('error', loopLimitExceededErrorHandler);
+        const renderer = inject(RendererFactory2).createRenderer(null, null);
+        this._cleanupErrorListener = renderer.listen(
+          'window',
+          'error',
+          loopLimitExceededErrorHandler,
+        );
       });
     }
   }
@@ -117,9 +124,7 @@ export class SharedResizeObserver implements OnDestroy {
       observer.destroy();
     }
     this._observers.clear();
-    if (typeof ResizeObserver !== 'undefined' && (typeof ngDevMode === 'undefined' || ngDevMode)) {
-      window.removeEventListener('error', loopLimitExceededErrorHandler);
-    }
+    this._cleanupErrorListener?.();
   }
 
   /**

src/cdk/overlay/dispatchers/overlay-keyboard-dispatcher.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable, NgZone, inject} from '@angular/core';
+import {Injectable, NgZone, RendererFactory2, inject} from '@angular/core';
 import {BaseOverlayDispatcher} from './base-overlay-dispatcher';
 import type {OverlayRef} from '../overlay-ref';
 
@@ -17,30 +17,28 @@ import type {OverlayRef} from '../overlay-ref';
  */
 @Injectable({providedIn: 'root'})
 export class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
-  private _ngZone = inject(NgZone, {optional: true});
+  private _ngZone = inject(NgZone);
+  private _renderer = inject(RendererFactory2).createRenderer(null, null);
+  private _cleanupKeydown: (() => void) | undefined;
 
   /** Add a new overlay to the list of attached overlay refs. */
   override add(overlayRef: OverlayRef): void {
     super.add(overlayRef);
 
     // Lazily start dispatcher once first overlay is added
     if (!this._isAttached) {
-      /** @breaking-change 14.0.0 _ngZone will be required. */
-      if (this._ngZone) {
-        this._ngZone.runOutsideAngular(() =>
-          this._document.body.addEventListener('keydown', this._keydownListener),
-        );
-      } else {
-        this._document.body.addEventListener('keydown', this._keydownListener);
-      }
+      this._ngZone.runOutsideAngular(() => {
+        this._cleanupKeydown = this._renderer.listen('document', 'keydown', this._keydownListener);
+      });
+
       this._isAttached = true;
     }
   }
 
   /** Detaches the global keyboard event listener. */
   protected detach() {
     if (this._isAttached) {
-      this._document.body.removeEventListener('keydown', this._keydownListener);
+      this._cleanupKeydown?.();
       this._isAttached = false;
     }
   }
@@ -57,13 +55,7 @@ export class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
       // because we don't want overlays that don't handle keyboard events to block the ones below
       // them that do.
       if (overlays[i]._keydownEvents.observers.length > 0) {
-        const keydownEvents = overlays[i]._keydownEvents;
-        /** @breaking-change 14.0.0 _ngZone will be required. */
-        if (this._ngZone) {
-          this._ngZone.run(() => keydownEvents.next(event));
-        } else {
-          keydownEvents.next(event);
-        }
+        this._ngZone.run(() => overlays[i]._keydownEvents.next(event));
         break;
       }
     }

src/cdk/overlay/fullscreen-overlay-container.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Injectable, OnDestroy} from '@angular/core';
+import {inject, Injectable, OnDestroy, RendererFactory2} from '@angular/core';
 import {OverlayContainer} from './overlay-container';
 
 /**
@@ -18,8 +18,9 @@ import {OverlayContainer} from './overlay-container';
  */
 @Injectable({providedIn: 'root'})
 export class FullscreenOverlayContainer extends OverlayContainer implements OnDestroy {
+  private _renderer = inject(RendererFactory2).createRenderer(null, null);
   private _fullScreenEventName: string | undefined;
-  private _fullScreenListener: () => void;
+  private _cleanupFullScreenListener: (() => void) | undefined;
 
   constructor(...args: unknown[]);
 
@@ -29,38 +30,27 @@ export class FullscreenOverlayContainer extends OverlayContainer implements OnDe
 
   override ngOnDestroy() {
     super.ngOnDestroy();
-
-    if (this._fullScreenEventName && this._fullScreenListener) {
-      this._document.removeEventListener(this._fullScreenEventName, this._fullScreenListener);
-    }
+    this._cleanupFullScreenListener?.();
   }
 
   protected override _createContainer(): void {
+    const eventName = this._getEventName();
     super._createContainer();
     this._adjustParentForFullscreenChange();
-    this._addFullscreenChangeListener(() => this._adjustParentForFullscreenChange());
-  }
 
-  private _adjustParentForFullscreenChange(): void {
-    if (!this._containerElement) {
-      return;
+    if (eventName) {
+      this._cleanupFullScreenListener?.();
+      this._cleanupFullScreenListener = this._renderer.listen('document', eventName, () => {
+        this._adjustParentForFullscreenChange();
+      });
     }
-
-    const fullscreenElement = this.getFullscreenElement();
-    const parent = fullscreenElement || this._document.body;
-    parent.appendChild(this._containerElement);
   }
 
-  private _addFullscreenChangeListener(fn: () => void) {
-    const eventName = this._getEventName();
-
-    if (eventName) {
-      if (this._fullScreenListener) {
-        this._document.removeEventListener(eventName, this._fullScreenListener);
-      }
-
-      this._document.addEventListener(eventName, fn);
-      this._fullScreenListener = fn;
+  private _adjustParentForFullscreenChange(): void {
+    if (this._containerElement) {
+      const fullscreenElement = this.getFullscreenElement();
+      const parent = fullscreenElement || this._document.body;
+      parent.appendChild(this._containerElement);
     }
   }
 

src/cdk/overlay/overlay-ref.ts

@@ -14,6 +14,7 @@ import {
   EmbeddedViewRef,
   EnvironmentInjector,
   NgZone,
+  Renderer2,
   afterNextRender,
   afterRender,
   untracked,
@@ -46,10 +47,8 @@ export class OverlayRef implements PortalOutlet {
   private _positionStrategy: PositionStrategy | undefined;
   private _scrollStrategy: ScrollStrategy | undefined;
   private _locationChanges: SubscriptionLike = Subscription.EMPTY;
-  private _backdropClickHandler = (event: MouseEvent) => this._backdropClick.next(event);
-  private _backdropTransitionendHandler = (event: TransitionEvent) => {
-    this._disposeBackdrop(event.target as HTMLElement | null);
-  };
+  private _cleanupBackdropClick: (() => void) | undefined;
+  private _cleanupBackdropTransitionEnd: (() => void) | undefined;
 
   /**
    * Reference to the parent of the `_host` at the time it was detached. Used to restore
@@ -82,6 +81,7 @@ export class OverlayRef implements PortalOutlet {
     private _outsideClickDispatcher: OverlayOutsideClickDispatcher,
     private _animationsDisabled = false,
     private _injector: EnvironmentInjector,
+    private _renderer: Renderer2,
   ) {
     if (_config.scrollStrategy) {
       this._scrollStrategy = _config.scrollStrategy;
@@ -449,7 +449,12 @@ export class OverlayRef implements PortalOutlet {
 
     // Forward backdrop clicks such that the consumer of the overlay can perform whatever
     // action desired when such a click occurs (usually closing the overlay).
-    this._backdropElement.addEventListener('click', this._backdropClickHandler);
+    this._cleanupBackdropClick?.();
+    this._cleanupBackdropClick = this._renderer.listen(
+      this._backdropElement,
+      'click',
+      (event: MouseEvent) => this._backdropClick.next(event),
+    );
 
     // Add class to fade-in the backdrop after one frame.
     if (!this._animationsDisabled && typeof requestAnimationFrame !== 'undefined') {
@@ -494,7 +499,14 @@ export class OverlayRef implements PortalOutlet {
     backdropToDetach.classList.remove('cdk-overlay-backdrop-showing');
 
     this._ngZone.runOutsideAngular(() => {
-      backdropToDetach!.addEventListener('transitionend', this._backdropTransitionendHandler);
+      this._cleanupBackdropTransitionEnd?.();
+      this._cleanupBackdropTransitionEnd = this._renderer.listen(
+        backdropToDetach,
+        'transitionend',
+        (event: TransitionEvent) => {
+          this._disposeBackdrop(event.target as HTMLElement | null);
+        },
+      );
     });
 
     // If the backdrop doesn't have a transition, the `transitionend` event won't fire.
@@ -565,9 +577,10 @@ export class OverlayRef implements PortalOutlet {
 
   /** Removes a backdrop element from the DOM. */
   private _disposeBackdrop(backdrop: HTMLElement | null) {
+    this._cleanupBackdropClick?.();
+    this._cleanupBackdropClick?.();
+
     if (backdrop) {
-      backdrop.removeEventListener('click', this._backdropClickHandler);
-      backdrop.removeEventListener('transitionend', this._backdropTransitionendHandler);
       backdrop.remove();
 
       // It is possible that a new portal has been attached to this overlay since we started