refactor(multiple): switch material to the inject function (#29731)

Switches Material from constructor-based DI to the `inject` function.

Author: crisbeto

src/cdk/a11y/aria-describer/aria-describer.ts

@@ -207,8 +207,7 @@ export class AriaDescriber implements OnDestroy {
     messagesContainer.classList.add(containerClassName);
     messagesContainer.classList.add('cdk-visually-hidden');
 
-    // @breaking-change 14.0.0 Remove null check for `_platform`.
-    if (this._platform && !this._platform.isBrowser) {
+    if (!this._platform.isBrowser) {
       messagesContainer.setAttribute('platform', 'server');
     }
 

src/cdk/portal/dom-portal-outlet.ts

@@ -150,12 +150,6 @@ export class DomPortalOutlet extends BasePortalOutlet {
    * @breaking-change 10.0.0
    */
   override attachDomPortal = (portal: DomPortal) => {
-    // @breaking-change 10.0.0 Remove check and error once the
-    // `_document` constructor parameter is required.
-    if (!this._document && (typeof ngDevMode === 'undefined' || ngDevMode)) {
-      throw Error('Cannot attach DOM portal without _document constructor parameter');
-    }
-
     const element = portal.element;
     if (!element.parentNode && (typeof ngDevMode === 'undefined' || ngDevMode)) {
       throw Error('DOM portal content must be attached to a parent node.');

src/cdk/portal/portal-directives.ts

@@ -201,12 +201,6 @@ export class CdkPortalOutlet extends BasePortalOutlet implements OnInit, OnDestr
    * @breaking-change 10.0.0
    */
   override attachDomPortal = (portal: DomPortal) => {
-    // @breaking-change 9.0.0 Remove check and error once the
-    // `_document` constructor parameter is required.
-    if (!this._document && (typeof ngDevMode === 'undefined' || ngDevMode)) {
-      throw Error('Cannot attach DOM portal without _document constructor parameter');
-    }
-
     const element = portal.element;
     if (!element.parentNode && (typeof ngDevMode === 'undefined' || ngDevMode)) {
       throw Error('DOM portal content must be attached to a parent node.');

src/material-date-fns-adapter/adapter/date-fns-adapter.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Inject, Injectable, Optional} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {DateAdapter, MAT_DATE_LOCALE} from '@angular/material/core';
 import {
   Locale,
@@ -52,8 +52,11 @@ const DAY_OF_WEEK_FORMATS = {
 /** Adds date-fns support to Angular Material. */
 @Injectable()
 export class DateFnsAdapter extends DateAdapter<Date, Locale> {
-  constructor(@Optional() @Inject(MAT_DATE_LOCALE) matDateLocale: {}) {
+  constructor(...args: unknown[]);
+
+  constructor() {
     super();
+    const matDateLocale = inject(MAT_DATE_LOCALE, {optional: true});
     this.setLocale(matDateLocale as Locale);
   }
 

src/material-luxon-adapter/adapter/luxon-date-adapter.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Inject, Injectable, Optional, InjectionToken} from '@angular/core';
+import {Injectable, InjectionToken, inject} from '@angular/core';
 import {DateAdapter, MAT_DATE_LOCALE} from '@angular/material/core';
 import {
   DateTime as LuxonDateTime,
@@ -70,13 +70,16 @@ export class LuxonDateAdapter extends DateAdapter<LuxonDateTime> {
   private _firstDayOfWeek: number;
   private _defaultOutputCalendar: LuxonCalendarSystem;
 
-  constructor(
-    @Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string,
-    @Optional()
-    @Inject(MAT_LUXON_DATE_ADAPTER_OPTIONS)
-    options?: MatLuxonDateAdapterOptions,
-  ) {
+  constructor(...args: unknown[]);
+
+  constructor() {
     super();
+
+    const dateLocale = inject(MAT_DATE_LOCALE, {optional: true});
+    const options = inject<MatLuxonDateAdapterOptions>(MAT_LUXON_DATE_ADAPTER_OPTIONS, {
+      optional: true,
+    });
+
     this._useUTC = !!options?.useUtc;
     this._firstDayOfWeek = options?.firstDayOfWeek || 0;
     this._defaultOutputCalendar = options?.defaultOutputCalendar || 'gregory';

src/material-moment-adapter/adapter/moment-date-adapter.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Inject, Injectable, Optional, InjectionToken} from '@angular/core';
+import {Injectable, InjectionToken, inject} from '@angular/core';
 import {DateAdapter, MAT_DATE_LOCALE} from '@angular/material/core';
 // Depending on whether rollup is used, moment needs to be imported differently.
 // Since Moment.js doesn't have a default export, we normally need to import using the `* as`
@@ -63,6 +63,10 @@ function range<T>(length: number, valueFunction: (index: number) => T): T[] {
 /** Adapts Moment.js Dates for use with Angular Material. */
 @Injectable()
 export class MomentDateAdapter extends DateAdapter<Moment> {
+  private _options = inject<MatMomentDateAdapterOptions>(MAT_MOMENT_DATE_ADAPTER_OPTIONS, {
+    optional: true,
+  });
+
   // Note: all of the methods that accept a `Moment` input parameter immediately call `this.clone`
   // on it. This is to ensure that we're working with a `Moment` that has the correct locale setting
   // while avoiding mutating the original object passed to us. Just calling `.locale(...)` on the
@@ -78,13 +82,11 @@ export class MomentDateAdapter extends DateAdapter<Moment> {
     narrowDaysOfWeek: string[];
   };
 
-  constructor(
-    @Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string,
-    @Optional()
-    @Inject(MAT_MOMENT_DATE_ADAPTER_OPTIONS)
-    private _options?: MatMomentDateAdapterOptions,
-  ) {
+  constructor(...args: unknown[]);
+
+  constructor() {
     super();
+    const dateLocale = inject<string>(MAT_DATE_LOCALE, {optional: true});
     this.setLocale(dateLocale || moment.locale());
   }
 

src/material/autocomplete/autocomplete-origin.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef} from '@angular/core';
+import {Directive, ElementRef, inject} from '@angular/core';
 
 /**
  * Directive applied to an element to make it usable
@@ -18,8 +18,8 @@ import {Directive, ElementRef} from '@angular/core';
   standalone: true,
 })
 export class MatAutocompleteOrigin {
-  constructor(
-    /** Reference to the element on which the directive is applied. */
-    public elementRef: ElementRef<HTMLElement>,
-  ) {}
+  elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  constructor(...args: unknown[]);
+  constructor() {}
 }

src/material/autocomplete/autocomplete-trigger.ts

@@ -28,15 +28,12 @@ import {
   ChangeDetectorRef,
   Directive,
   ElementRef,
-  Host,
-  Inject,
   InjectionToken,
   Injector,
   Input,
   NgZone,
   OnChanges,
   OnDestroy,
-  Optional,
   SimpleChanges,
   ViewContainerRef,
   afterNextRender,
@@ -134,10 +131,24 @@ export const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER = {
 export class MatAutocompleteTrigger
   implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy
 {
+  private _element = inject<ElementRef<HTMLInputElement>>(ElementRef);
+  private _overlay = inject(Overlay);
+  private _viewContainerRef = inject(ViewContainerRef);
+  private _zone = inject(NgZone);
+  private _changeDetectorRef = inject(ChangeDetectorRef);
+  private _dir = inject(Directionality, {optional: true});
+  private _formField = inject<MatFormField | null>(MAT_FORM_FIELD, {optional: true, host: true});
+  private _document = inject(DOCUMENT);
+  private _viewportRuler = inject(ViewportRuler);
+  private _defaults = inject<MatAutocompleteDefaultOptions | null>(
+    MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
+    {optional: true},
+  );
+
   private _overlayRef: OverlayRef | null;
   private _portal: TemplatePortal;
   private _componentDestroyed = false;
-  private _scrollStrategy: () => ScrollStrategy;
+  private _scrollStrategy = inject(MAT_AUTOCOMPLETE_SCROLL_STRATEGY);
   private _keydownSubscription: Subscription | null;
   private _outsideClickSubscription: Subscription | null;
 
@@ -238,23 +249,8 @@ export class MatAutocompleteTrigger
 
   private _injector = inject(Injector);
 
-  constructor(
-    private _element: ElementRef<HTMLInputElement>,
-    private _overlay: Overlay,
-    private _viewContainerRef: ViewContainerRef,
-    private _zone: NgZone,
-    private _changeDetectorRef: ChangeDetectorRef,
-    @Inject(MAT_AUTOCOMPLETE_SCROLL_STRATEGY) scrollStrategy: any,
-    @Optional() private _dir: Directionality | null,
-    @Optional() @Inject(MAT_FORM_FIELD) @Host() private _formField: MatFormField | null,
-    @Optional() @Inject(DOCUMENT) private _document: any,
-    private _viewportRuler: ViewportRuler,
-    @Optional()
-    @Inject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS)
-    private _defaults?: MatAutocompleteDefaultOptions | null,
-  ) {
-    this._scrollStrategy = scrollStrategy;
-  }
+  constructor(...args: unknown[]);
+  constructor() {}
 
   /** Class to apply to the panel when it's above the input. */
   private _aboveClass = 'mat-mdc-autocomplete-panel-above';

src/material/autocomplete/autocomplete.ts

@@ -14,7 +14,6 @@ import {
   ContentChildren,
   ElementRef,
   EventEmitter,
-  Inject,
   InjectionToken,
   Input,
   OnDestroy,
@@ -24,6 +23,7 @@ import {
   ViewChild,
   ViewEncapsulation,
   booleanAttribute,
+  inject,
 } from '@angular/core';
 import {AnimationEvent} from '@angular/animations';
 import {
@@ -119,6 +119,10 @@ export function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): MatAutocompleteDefau
   standalone: true,
 })
 export class MatAutocomplete implements AfterContentInit, OnDestroy {
+  private _changeDetectorRef = inject(ChangeDetectorRef);
+  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  protected _defaults = inject<MatAutocompleteDefaultOptions>(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS);
+
   private _activeOptionChanges = Subscription.EMPTY;
 
   /** Emits when the panel animation is done. Null if the panel doesn't animate. */
@@ -252,20 +256,19 @@ export class MatAutocomplete implements AfterContentInit, OnDestroy {
    */
   readonly inertGroups: boolean;
 
-  constructor(
-    private _changeDetectorRef: ChangeDetectorRef,
-    private _elementRef: ElementRef<HTMLElement>,
-    @Inject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS) protected _defaults: MatAutocompleteDefaultOptions,
-    platform?: Platform,
-  ) {
+  constructor(...args: unknown[]);
+
+  constructor() {
+    const platform = inject(Platform);
+
     // TODO(crisbeto): the problem that the `inertGroups` option resolves is only present on
     // Safari using VoiceOver. We should occasionally check back to see whether the bug
     // wasn't resolved in VoiceOver, and if it has, we can remove this and the `inertGroups`
     // option altogether.
     this.inertGroups = platform?.SAFARI || false;
-    this.autoActiveFirstOption = !!_defaults.autoActiveFirstOption;
-    this.autoSelectActiveOption = !!_defaults.autoSelectActiveOption;
-    this.requireSelection = !!_defaults.requireSelection;
+    this.autoActiveFirstOption = !!this._defaults.autoActiveFirstOption;
+    this.autoSelectActiveOption = !!this._defaults.autoSelectActiveOption;
+    this.requireSelection = !!this._defaults.requireSelection;
     this._hideSingleSelectionIndicator = this._defaults.hideSingleSelectionIndicator ?? false;
   }
 

src/material/badge/badge.ts

@@ -15,12 +15,10 @@ import {
   Directive,
   ElementRef,
   inject,
-  Inject,
   Input,
   NgZone,
   OnDestroy,
   OnInit,
-  Optional,
   Renderer2,
   ViewEncapsulation,
   ANIMATION_MODULE_TYPE,
@@ -78,6 +76,12 @@ export class _MatBadgeStyleLoader {}
   standalone: true,
 })
 export class MatBadge implements OnInit, OnDestroy {
+  private _ngZone = inject(NgZone);
+  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private _ariaDescriber = inject(AriaDescriber);
+  private _renderer = inject(Renderer2);
+  private _animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
+
   /**
    * Theme color of the badge. This API is supported in M2 themes only, it
    * has no effect in M3 themes.
@@ -150,18 +154,13 @@ export class MatBadge implements OnInit, OnDestroy {
 
   private _document = inject(DOCUMENT);
 
-  constructor(
-    private _ngZone: NgZone,
-    private _elementRef: ElementRef<HTMLElement>,
-    private _ariaDescriber: AriaDescriber,
-    private _renderer: Renderer2,
-    @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string,
-  ) {
-    const styleLoader = inject(_CdkPrivateStyleLoader);
-    styleLoader.load(_MatBadgeStyleLoader);
+  constructor(...args: unknown[]);
+
+  constructor() {
+    inject(_CdkPrivateStyleLoader).load(_MatBadgeStyleLoader);
 
     if (typeof ngDevMode === 'undefined' || ngDevMode) {
-      const nativeElement = _elementRef.nativeElement;
+      const nativeElement = this._elementRef.nativeElement;
       if (nativeElement.nodeType !== nativeElement.ELEMENT_NODE) {
         throw Error('matBadge must be attached to an element node.');
       }