refactor(multiple): switch experimental packages to inject (#29675)

Switches all the experimental packages to use `inject` instead of constructor-based injection.

Author: crisbeto

src/cdk-experimental/column-resize/column-resize-directives/column-resize-flex.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, NgZone} from '@angular/core';
+import {Directive, ElementRef, NgZone, inject} from '@angular/core';
 import {CdkTable} from '@angular/cdk/table';
 
 import {ColumnResize} from '../column-resize';
@@ -24,14 +24,10 @@ import {FLEX_PROVIDERS} from './constants';
   standalone: true,
 })
 export class CdkColumnResizeFlex extends ColumnResize {
-  constructor(
-    readonly columnResizeNotifier: ColumnResizeNotifier,
-    readonly elementRef: ElementRef<HTMLElement>,
-    protected readonly eventDispatcher: HeaderRowEventDispatcher,
-    protected readonly ngZone: NgZone,
-    protected readonly notifier: ColumnResizeNotifierSource,
-    protected readonly table: CdkTable<unknown>,
-  ) {
-    super();
-  }
+  readonly columnResizeNotifier = inject(ColumnResizeNotifier);
+  readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  protected readonly eventDispatcher = inject(HeaderRowEventDispatcher);
+  protected readonly ngZone = inject(NgZone);
+  protected readonly notifier = inject(ColumnResizeNotifierSource);
+  protected readonly table = inject<CdkTable<unknown>>(CdkTable);
 }

src/cdk-experimental/column-resize/column-resize-directives/column-resize.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, NgZone} from '@angular/core';
+import {Directive, ElementRef, NgZone, inject} from '@angular/core';
 import {CdkTable} from '@angular/cdk/table';
 
 import {ColumnResize} from '../column-resize';
@@ -24,14 +24,10 @@ import {TABLE_PROVIDERS} from './constants';
   standalone: true,
 })
 export class CdkColumnResize extends ColumnResize {
-  constructor(
-    readonly columnResizeNotifier: ColumnResizeNotifier,
-    readonly elementRef: ElementRef<HTMLElement>,
-    protected readonly eventDispatcher: HeaderRowEventDispatcher,
-    protected readonly ngZone: NgZone,
-    protected readonly notifier: ColumnResizeNotifierSource,
-    protected readonly table: CdkTable<unknown>,
-  ) {
-    super();
-  }
+  readonly columnResizeNotifier = inject(ColumnResizeNotifier);
+  readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  protected readonly eventDispatcher = inject(HeaderRowEventDispatcher);
+  protected readonly ngZone = inject(NgZone);
+  protected readonly notifier = inject(ColumnResizeNotifierSource);
+  protected readonly table = inject<CdkTable<unknown>>(CdkTable);
 }

src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, NgZone} from '@angular/core';
+import {Directive, ElementRef, NgZone, inject} from '@angular/core';
 import {CdkTable} from '@angular/cdk/table';
 
 import {ColumnResize} from '../column-resize';
@@ -27,14 +27,10 @@ import {FLEX_PROVIDERS} from './constants';
   standalone: true,
 })
 export class CdkDefaultEnabledColumnResizeFlex extends ColumnResize {
-  constructor(
-    readonly columnResizeNotifier: ColumnResizeNotifier,
-    readonly elementRef: ElementRef<HTMLElement>,
-    protected readonly eventDispatcher: HeaderRowEventDispatcher,
-    protected readonly ngZone: NgZone,
-    protected readonly notifier: ColumnResizeNotifierSource,
-    protected readonly table: CdkTable<unknown>,
-  ) {
-    super();
-  }
+  readonly columnResizeNotifier = inject(ColumnResizeNotifier);
+  readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  protected readonly eventDispatcher = inject(HeaderRowEventDispatcher);
+  protected readonly ngZone = inject(NgZone);
+  protected readonly notifier = inject(ColumnResizeNotifierSource);
+  protected readonly table = inject<CdkTable<unknown>>(CdkTable);
 }

src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, NgZone} from '@angular/core';
+import {Directive, ElementRef, NgZone, inject} from '@angular/core';
 import {CdkTable} from '@angular/cdk/table';
 
 import {ColumnResize} from '../column-resize';
@@ -27,14 +27,10 @@ import {TABLE_PROVIDERS} from './constants';
   standalone: true,
 })
 export class CdkDefaultEnabledColumnResize extends ColumnResize {
-  constructor(
-    readonly columnResizeNotifier: ColumnResizeNotifier,
-    readonly elementRef: ElementRef<HTMLElement>,
-    protected readonly eventDispatcher: HeaderRowEventDispatcher,
-    protected readonly ngZone: NgZone,
-    protected readonly notifier: ColumnResizeNotifierSource,
-    protected readonly table: CdkTable<unknown>,
-  ) {
-    super();
-  }
+  readonly columnResizeNotifier = inject(ColumnResizeNotifier);
+  readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  protected readonly eventDispatcher = inject(HeaderRowEventDispatcher);
+  protected readonly ngZone = inject(NgZone);
+  protected readonly notifier = inject(ColumnResizeNotifierSource);
+  protected readonly table = inject<CdkTable<unknown>>(CdkTable);
 }

src/cdk-experimental/column-resize/event-dispatcher.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, NgZone} from '@angular/core';
+import {Injectable, NgZone, inject} from '@angular/core';
 import {combineLatest, MonoTypeOperatorFunction, Observable, Subject} from 'rxjs';
 import {distinctUntilChanged, map, share, skip, startWith} from 'rxjs/operators';
 
@@ -17,6 +17,8 @@ import {HEADER_ROW_SELECTOR} from './selectors';
 /** Coordinates events between the column resize directives. */
 @Injectable()
 export class HeaderRowEventDispatcher {
+  private readonly _ngZone = inject(NgZone);
+
   /**
    * Emits the currently hovered header cell or null when no header cells are hovered.
    * Exposed publicly for events to feed in, but subscribers should use headerCellHoveredDistinct,
@@ -30,8 +32,6 @@ export class HeaderRowEventDispatcher {
    */
   readonly overlayHandleActiveForCell = new Subject<Element | null>();
 
-  constructor(private readonly _ngZone: NgZone) {}
-
   /** Distinct and shared version of headerCellHovered. */
   readonly headerCellHoveredDistinct = this.headerCellHovered.pipe(distinctUntilChanged(), share());
 

src/cdk-experimental/column-resize/resize-strategy.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Inject, Injectable, OnDestroy, Provider, CSP_NONCE, Optional} from '@angular/core';
+import {Injectable, OnDestroy, Provider, CSP_NONCE, inject} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {coerceCssPixelValue} from '@angular/cdk/coercion';
 import {CdkTable, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER} from '@angular/cdk/table';
@@ -77,14 +77,9 @@ export abstract class ResizeStrategy {
  */
 @Injectable()
 export class TableLayoutFixedResizeStrategy extends ResizeStrategy {
-  constructor(
-    protected readonly columnResize: ColumnResize,
-    @Inject(_COALESCED_STYLE_SCHEDULER)
-    protected readonly styleScheduler: _CoalescedStyleScheduler,
-    protected readonly table: CdkTable<unknown>,
-  ) {
-    super();
-  }
+  protected readonly columnResize = inject(ColumnResize);
+  protected readonly styleScheduler = inject<_CoalescedStyleScheduler>(_COALESCED_STYLE_SCHEDULER);
+  protected readonly table = inject<CdkTable<unknown>>(CdkTable);
 
   applyColumnSize(
     _: string,
@@ -128,7 +123,12 @@ export class TableLayoutFixedResizeStrategy extends ResizeStrategy {
  */
 @Injectable()
 export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDestroy {
-  private readonly _document: Document;
+  protected readonly columnResize = inject(ColumnResize);
+  protected readonly styleScheduler = inject<_CoalescedStyleScheduler>(_COALESCED_STYLE_SCHEDULER);
+  protected readonly table = inject<CdkTable<unknown>>(CdkTable);
+  private readonly _nonce = inject(CSP_NONCE, {optional: true});
+
+  private readonly _document = inject(DOCUMENT);
   private readonly _columnIndexes = new Map<string, number>();
   private readonly _columnProperties = new Map<string, Map<string, string>>();
 
@@ -138,18 +138,6 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest
   protected readonly defaultMinSize = 0;
   protected readonly defaultMaxSize = Number.MAX_SAFE_INTEGER;
 
-  constructor(
-    protected readonly columnResize: ColumnResize,
-    @Inject(_COALESCED_STYLE_SCHEDULER)
-    protected readonly styleScheduler: _CoalescedStyleScheduler,
-    protected readonly table: CdkTable<unknown>,
-    @Inject(DOCUMENT) document: any,
-    @Inject(CSP_NONCE) @Optional() private readonly _nonce?: string | null,
-  ) {
-    super();
-    this._document = document;
-  }
-
   applyColumnSize(
     cssFriendlyColumnName: string,
     columnHeader: HTMLElement,

src/cdk-experimental/combobox/combobox-popup.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, Inject, Input, OnInit} from '@angular/core';
+import {Directive, ElementRef, Input, OnInit, inject} from '@angular/core';
 import {AriaHasPopupValue, CDK_COMBOBOX, CdkCombobox} from './combobox';
 
 let nextId = 0;
@@ -24,6 +24,9 @@ let nextId = 0;
   standalone: true,
 })
 export class CdkComboboxPopup<T = unknown> implements OnInit {
+  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly _combobox = inject<CdkCombobox>(CDK_COMBOBOX);
+
   @Input()
   get role(): AriaHasPopupValue {
     return this._role;
@@ -44,11 +47,6 @@ export class CdkComboboxPopup<T = unknown> implements OnInit {
 
   @Input() id = `cdk-combobox-popup-${nextId++}`;
 
-  constructor(
-    private readonly _elementRef: ElementRef<HTMLElement>,
-    @Inject(CDK_COMBOBOX) private readonly _combobox: CdkCombobox,
-  ) {}
-
   ngOnInit() {
     this.registerWithPanel();
   }

src/cdk-experimental/combobox/combobox.ts

@@ -23,12 +23,10 @@ import {
   Directive,
   ElementRef,
   EventEmitter,
-  Inject,
   InjectionToken,
   Injector,
   Input,
   OnDestroy,
-  Optional,
   Output,
   TemplateRef,
   ViewContainerRef,
@@ -63,6 +61,16 @@ export const CDK_COMBOBOX = new InjectionToken<CdkCombobox>('CDK_COMBOBOX');
   standalone: true,
 })
 export class CdkCombobox<T = unknown> implements OnDestroy {
+  private readonly _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly _overlay = inject(Overlay);
+  protected readonly _viewContainerRef = inject(ViewContainerRef);
+  private readonly _injector = inject(Injector);
+  private readonly _doc = inject(DOCUMENT);
+  private readonly _directionality = inject(Directionality, {optional: true});
+  private _changeDetectorRef = inject(ChangeDetectorRef);
+  private _overlayRef: OverlayRef;
+  private _panelPortal: TemplatePortal;
+
   @Input('cdkComboboxTriggerFor')
   _panelTemplateRef: TemplateRef<unknown>;
 
@@ -103,23 +111,9 @@ export class CdkCombobox<T = unknown> implements OnDestroy {
     T[]
   >();
 
-  private _overlayRef: OverlayRef;
-  private _panelPortal: TemplatePortal;
-
   contentId: string = '';
   contentType: AriaHasPopupValue;
 
-  private _changeDetectorRef = inject(ChangeDetectorRef);
-
-  constructor(
-    private readonly _elementRef: ElementRef<HTMLElement>,
-    private readonly _overlay: Overlay,
-    protected readonly _viewContainerRef: ViewContainerRef,
-    private readonly _injector: Injector,
-    @Inject(DOCUMENT) private readonly _doc: any,
-    @Optional() private readonly _directionality?: Directionality,
-  ) {}
-
   ngOnDestroy() {
     if (this._overlayRef) {
       this._overlayRef.dispose();
@@ -260,7 +254,7 @@ export class CdkCombobox<T = unknown> implements OnDestroy {
     return new OverlayConfig({
       positionStrategy: this._getOverlayPositionStrategy(),
       scrollStrategy: this._overlay.scrollStrategies.block(),
-      direction: this._directionality,
+      direction: this._directionality || undefined,
     });
   }
 

src/cdk-experimental/popover-edit/edit-event-dispatcher.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, NgZone} from '@angular/core';
+import {Injectable, NgZone, inject} from '@angular/core';
 import {combineLatest, MonoTypeOperatorFunction, Observable, pipe, Subject} from 'rxjs';
 import {
   audit,
@@ -50,6 +50,8 @@ export enum HoverContentState {
  */
 @Injectable()
 export class EditEventDispatcher<R> {
+  private readonly _ngZone = inject(NgZone);
+
   /** A subject that indicates which table cell is currently editing (unless it is disabled). */
   readonly editing = new Subject<Element | null>();
 
@@ -155,7 +157,7 @@ export class EditEventDispatcher<R> {
   private _lastSeenRow: Element | null = null;
   private _lastSeenRowHoverOrFocus: Observable<HoverContentState> | null = null;
 
-  constructor(private readonly _ngZone: NgZone) {
+  constructor() {
     this._editingAndEnabledDistinct.subscribe(cell => {
       this._currentlyEditing = cell;
     });

src/cdk-experimental/popover-edit/edit-ref.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, OnDestroy, Self, afterNextRender, inject, Injector} from '@angular/core';
+import {Injectable, OnDestroy, afterNextRender, inject, Injector} from '@angular/core';
 import {ControlContainer} from '@angular/forms';
 import {Observable, Subject} from 'rxjs';
 
@@ -18,6 +18,10 @@ import {EditEventDispatcher} from './edit-event-dispatcher';
  */
 @Injectable()
 export class EditRef<FormValue> implements OnDestroy {
+  private readonly _form = inject(ControlContainer, {self: true});
+  private readonly _editEventDispatcher =
+    inject<EditEventDispatcher<EditRef<FormValue>>>(EditEventDispatcher);
+
   /** Emits the final value of this edit instance before closing. */
   private readonly _finalValueSubject = new Subject<FormValue>();
   readonly finalValue: Observable<FormValue> = this._finalValueSubject;
@@ -31,10 +35,7 @@ export class EditRef<FormValue> implements OnDestroy {
 
   private _injector = inject(Injector);
 
-  constructor(
-    @Self() private readonly _form: ControlContainer,
-    private readonly _editEventDispatcher: EditEventDispatcher<EditRef<FormValue>>,
-  ) {
+  constructor() {
     this._editEventDispatcher.setActiveEditRef(this);
   }
 

src/cdk-experimental/popover-edit/edit-services.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Injectable, NgZone} from '@angular/core';
+import {Injectable, NgZone, inject} from '@angular/core';
 import {FocusTrapFactory} from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
 import {Overlay} from '@angular/cdk/overlay';
@@ -24,14 +24,12 @@ import {EditRef} from './edit-ref';
  */
 @Injectable()
 export class EditServices {
-  constructor(
-    readonly directionality: Directionality,
-    readonly editEventDispatcher: EditEventDispatcher<EditRef<unknown>>,
-    readonly focusDispatcher: FocusDispatcher,
-    readonly focusTrapFactory: FocusTrapFactory,
-    readonly ngZone: NgZone,
-    readonly overlay: Overlay,
-    readonly scrollDispatcher: ScrollDispatcher,
-    readonly viewportRuler: ViewportRuler,
-  ) {}
+  readonly directionality = inject(Directionality);
+  readonly editEventDispatcher = inject<EditEventDispatcher<EditRef<unknown>>>(EditEventDispatcher);
+  readonly focusDispatcher = inject(FocusDispatcher);
+  readonly focusTrapFactory = inject(FocusTrapFactory);
+  readonly ngZone = inject(NgZone);
+  readonly overlay = inject(Overlay);
+  readonly scrollDispatcher = inject(ScrollDispatcher);
+  readonly viewportRuler = inject(ViewportRuler);
 }