build: switch dev app to inject (#29499)

Changes the dev app to use `inject` instead of constructor-based injection.

Author: crisbeto

src/dev-app/autocomplete/autocomplete-demo.ts

@@ -250,7 +250,7 @@ export class AutocompleteDemo {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AutocompleteDemoExampleDialog {
-  constructor(public dialogRef: MatDialogRef<AutocompleteDemoExampleDialog>) {}
+  dialogRef = inject<MatDialogRef<AutocompleteDemoExampleDialog>>(MatDialogRef);
 
   currentSize = '';
   sizes = ['S', 'M', 'L'];

src/dev-app/bottom-sheet/bottom-sheet-demo.ts

@@ -7,7 +7,7 @@
  */
 
 import {CommonModule} from '@angular/common';
-import {ChangeDetectionStrategy, Component, TemplateRef, ViewChild} from '@angular/core';
+import {ChangeDetectionStrategy, Component, TemplateRef, ViewChild, inject} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {
   MatBottomSheet,
@@ -47,6 +47,8 @@ const defaultConfig = new MatBottomSheetConfig();
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BottomSheetDemo {
+  private _bottomSheet = inject(MatBottomSheet);
+
   config: MatBottomSheetConfig = {
     hasBackdrop: defaultConfig.hasBackdrop,
     disableClose: defaultConfig.disableClose,
@@ -57,8 +59,6 @@ export class BottomSheetDemo {
 
   @ViewChild(TemplateRef) template: TemplateRef<any>;
 
-  constructor(private _bottomSheet: MatBottomSheet) {}
-
   openComponent() {
     this._bottomSheet.open(ExampleBottomSheet, this.config);
   }
@@ -84,7 +84,7 @@ export class BottomSheetDemo {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExampleBottomSheet {
-  constructor(private _bottomSheet: MatBottomSheetRef) {}
+  private _bottomSheet = inject(MatBottomSheetRef);
 
   handleClick(event: MouseEvent) {
     event.preventDefault();

src/dev-app/cdk-dialog/dialog-demo.ts

@@ -11,7 +11,6 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  Inject,
   TemplateRef,
   ViewChild,
   ViewEncapsulation,
@@ -31,6 +30,8 @@ const defaultDialogConfig = new DialogConfig();
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogDemo {
+  dialog = inject(Dialog);
+
   dialogRef: DialogRef<string> | null;
   result: string;
   actionsAlignment: 'start' | 'center' | 'end';
@@ -55,8 +56,6 @@ export class DialogDemo {
 
   readonly cdr = inject(ChangeDetectorRef);
 
-  constructor(public dialog: Dialog) {}
-
   openJazz() {
     this.dialogRef = this.dialog.open<string>(JazzDialog, this.config);
 
@@ -114,12 +113,10 @@ export class DialogDemo {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class JazzDialog {
-  private _dimensionToggle = false;
+  dialogRef = inject<DialogRef<string>>(DialogRef);
+  data = inject(DIALOG_DATA);
 
-  constructor(
-    public dialogRef: DialogRef<string>,
-    @Inject(DIALOG_DATA) public data: any,
-  ) {}
+  private _dimensionToggle = false;
 
   togglePosition(): void {
     this._dimensionToggle = !this._dimensionToggle;

src/dev-app/clipboard/clipboard-demo.ts

@@ -7,7 +7,7 @@
  */
 
 import {Clipboard, ClipboardModule} from '@angular/cdk/clipboard';
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 
 @Component({
@@ -19,6 +19,8 @@ import {FormsModule} from '@angular/forms';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ClipboardDemo {
+  private _clipboard = inject(Clipboard);
+
   attempts = 3;
 
   value =
@@ -32,8 +34,6 @@ export class ClipboardDemo {
     `Unfortunately, he taught his apprentice everything he knew, then his apprentice ` +
     `killed him in his sleep. Ironic. He could save others from death, but not himself.`;
 
-  constructor(private _clipboard: Clipboard) {}
-
   copyViaService() {
     this._clipboard.copy(this.value);
   }

src/dev-app/connected-overlay/connected-overlay-demo.ts

@@ -25,6 +25,7 @@ import {
   ViewChild,
   ViewContainerRef,
   ViewEncapsulation,
+  inject,
 } from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
@@ -49,6 +50,10 @@ import {MatRadioModule} from '@angular/material/radio';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ConnectedOverlayDemo {
+  overlay = inject(Overlay);
+  viewContainerRef = inject(ViewContainerRef);
+  dir = inject(Directionality);
+
   @ViewChild(CdkOverlayOrigin) _overlayOrigin: CdkOverlayOrigin;
   @ViewChild('overlay') overlayTemplate: TemplateRef<any>;
 
@@ -66,12 +71,6 @@ export class ConnectedOverlayDemo {
   itemText = 'Item with a long name';
   overlayRef: OverlayRef | null;
 
-  constructor(
-    public overlay: Overlay,
-    public viewContainerRef: ViewContainerRef,
-    public dir: Directionality,
-  ) {}
-
   openWithConfig() {
     const positionStrategy = this.overlay
       .position()

src/dev-app/datepicker/datepicker-demo.ts

@@ -12,17 +12,16 @@ import {
   ChangeDetectorRef,
   Component,
   Directive,
-  Inject,
   Injectable,
   OnDestroy,
-  Optional,
   ViewChild,
   ViewEncapsulation,
+  inject,
 } from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
-import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats, ThemePalette} from '@angular/material/core';
+import {DateAdapter, MAT_DATE_FORMATS, ThemePalette} from '@angular/material/core';
 import {
   DateRange,
   MAT_DATE_RANGE_SELECTION_STRATEGY,
@@ -42,7 +41,7 @@ import {takeUntil} from 'rxjs/operators';
 /** Range selection strategy that preserves the current range. */
 @Injectable()
 export class PreserveRangeStrategy<D> implements MatDateRangeSelectionStrategy<D> {
-  constructor(private _dateAdapter: DateAdapter<D>) {}
+  private _dateAdapter = inject<DateAdapter<D>>(DateAdapter<D>);
 
   selectionFinished(date: D, currentRange: DateRange<D>) {
     let {start, end} = currentRange;
@@ -108,14 +107,16 @@ export class CustomRangeStrategy {}
   imports: [MatIconModule, MatButtonModule],
 })
 export class CustomHeader<D> implements OnDestroy {
+  private _calendar = inject<MatCalendar<D>>(MatCalendar);
+  private _dateAdapter = inject<DateAdapter<D>>(DateAdapter);
+  private _dateFormats = inject(MAT_DATE_FORMATS);
+
   private readonly _destroyed = new Subject<void>();
 
-  constructor(
-    private _calendar: MatCalendar<D>,
-    private _dateAdapter: DateAdapter<D>,
-    @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,
-    cdr: ChangeDetectorRef,
-  ) {
+  constructor() {
+    const _calendar = this._calendar;
+    const cdr = inject(ChangeDetectorRef);
+
     _calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => cdr.markForCheck());
   }
 
@@ -157,11 +158,11 @@ export class CustomHeader<D> implements OnDestroy {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CustomHeaderNgContent<D> {
+  private _dateAdapter = inject<DateAdapter<D>>(DateAdapter);
+
   @ViewChild(MatCalendarHeader)
   header: MatCalendarHeader<D>;
 
-  constructor(@Optional() private _dateAdapter: DateAdapter<D>) {}
-
   todayClicked() {
     let calendar = this.header.calendar;
 

src/dev-app/dev-app/dev-app-layout.ts

@@ -13,7 +13,6 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  Inject,
   NgZone,
   ViewEncapsulation,
   inject,
@@ -26,9 +25,9 @@ import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatTooltip, MatTooltipModule} from '@angular/material/tooltip';
 import {RouterModule} from '@angular/router';
-import {DevAppDirectionality} from './dev-app-directionality';
 import {getAppState, setAppState} from './dev-app-state';
 import {DevAppRippleOptions} from './ripple-options';
+import {DevAppDirectionality} from './dev-app-directionality';
 
 /** Root component for the dev-app demos. */
 @Component({
@@ -50,6 +49,13 @@ import {DevAppRippleOptions} from './ripple-options';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DevAppLayout {
+  private _element = inject<ElementRef<HTMLElement>>(ElementRef);
+  private _rippleOptions = inject(DevAppRippleOptions);
+  private _dir = inject(Directionality) as DevAppDirectionality;
+  private _changeDetectorRef = inject(ChangeDetectorRef);
+  private _document = inject(DOCUMENT);
+  private _iconRegistry = inject(MatIconRegistry);
+
   state = getAppState();
   navItems = [
     {name: 'Examples', route: '/examples'},
@@ -119,14 +125,7 @@ export class DevAppLayout {
 
   readonly isZoneless = this._ngZone instanceof ɵNoopNgZone;
 
-  constructor(
-    private _element: ElementRef<HTMLElement>,
-    private _rippleOptions: DevAppRippleOptions,
-    @Inject(Directionality) private _dir: DevAppDirectionality,
-    private _changeDetectorRef: ChangeDetectorRef,
-    @Inject(DOCUMENT) private _document: Document,
-    private _iconRegistry: MatIconRegistry,
-  ) {
+  constructor() {
     this.toggleTheme(this.state.darkTheme);
     this.toggleStrongFocus(this.state.strongFocusEnabled);
     this.toggleDensity(Math.max(this._densityScales.indexOf(this.state.density), 0));

src/dev-app/dialog/dialog-demo.ts

@@ -12,7 +12,6 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  Inject,
   TemplateRef,
   ViewChild,
   ViewEncapsulation,
@@ -57,6 +56,8 @@ import {MatSelectModule} from '@angular/material/select';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogDemo {
+  dialog = inject(MatDialog);
+
   dialogRef: MatDialogRef<JazzDialog> | null;
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
@@ -90,10 +91,10 @@ export class DialogDemo {
 
   readonly cdr = inject(ChangeDetectorRef);
 
-  constructor(
-    public dialog: MatDialog,
-    @Inject(DOCUMENT) doc: any,
-  ) {
+  constructor() {
+    const dialog = this.dialog;
+    const doc = inject(DOCUMENT);
+
     // Possible useful example for the open and closeAll events.
     // Adding a class to the body if a dialog opens and
     // removing it after all open dialogs are closed
@@ -180,12 +181,10 @@ export class DialogDemo {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class JazzDialog {
-  private _dimensionToggle = false;
+  dialogRef = inject<MatDialogRef<JazzDialog>>(MatDialogRef<JazzDialog>);
+  data = inject(MAT_DIALOG_DATA);
 
-  constructor(
-    public dialogRef: MatDialogRef<JazzDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: any,
-  ) {}
+  private _dimensionToggle = false;
 
   togglePosition(): void {
     this._dimensionToggle = !this._dimensionToggle;
@@ -258,11 +257,11 @@ export class JazzDialog {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ContentElementDialog {
+  dialog = inject(MatDialog);
+
   actionsAlignment?: 'start' | 'center' | 'end';
   isScrollable: boolean;
 
-  constructor(public dialog: MatDialog) {}
-
   showInStackedDialog() {
     this.dialog.open(IFrameDialog, {maxWidth: '80vw'});
   }

src/dev-app/drag-drop/drag-drop-demo.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
+import {Component, ViewEncapsulation, ChangeDetectionStrategy, inject} from '@angular/core';
 import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
 import {DomSanitizer} from '@angular/platform-browser';
 import {
@@ -54,7 +54,10 @@ export class DragAndDropDemo {
   ages = ['Stone age', 'Bronze age', 'Iron age', 'Middle ages'];
   preferredAges = ['Modern period', 'Renaissance'];
 
-  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
+  constructor() {
+    const iconRegistry = inject(MatIconRegistry);
+    const sanitizer = inject(DomSanitizer);
+
     iconRegistry.addSvgIconLiteral(
       'dnd-move',
       sanitizer.bypassSecurityTrustHtml(

src/dev-app/example/example.ts

@@ -6,10 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {CommonModule} from '@angular/common';
-import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
-import {loadExample} from '@angular/components-examples/private';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -18,7 +14,12 @@ import {
   Input,
   OnInit,
   ViewContainerRef,
+  inject,
 } from '@angular/core';
+import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
+import {CommonModule} from '@angular/common';
+import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
+import {loadExample} from '@angular/components-examples/private';
 
 @Component({
   selector: 'material-example',
@@ -61,6 +62,10 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Example implements OnInit {
+  private _injector = inject(Injector);
+  private _viewContainerRef = inject(ViewContainerRef);
+  private _changeDetectorRef = inject(ChangeDetectorRef);
+
   /** ID of the material example to display. */
   @Input() id: string;
 
@@ -75,12 +80,6 @@ export class Example implements OnInit {
 
   title: string;
 
-  constructor(
-    private _injector: Injector,
-    private _viewContainerRef: ViewContainerRef,
-    private _changeDetectorRef: ChangeDetectorRef,
-  ) {}
-
   async ngOnInit() {
     this.title = EXAMPLE_COMPONENTS[this.id].title;