docs: switch all examples to use inject (#29495)

Updates all of the docs examples to use `inject` instead of constructor-based injection.

Author: crisbeto

src/components-examples/cdk/a11y/focus-monitor-directives/focus-monitor-directives-example.ts

@@ -1,5 +1,5 @@
+import {ChangeDetectorRef, Component, NgZone, inject} from '@angular/core';
 import {A11yModule, FocusOrigin} from '@angular/cdk/a11y';
-import {ChangeDetectorRef, Component, NgZone} from '@angular/core';
 
 /** @title Monitoring focus with FocusMonitor */
 @Component({
@@ -10,14 +10,12 @@ import {ChangeDetectorRef, Component, NgZone} from '@angular/core';
   imports: [A11yModule],
 })
 export class FocusMonitorDirectivesExample {
+  private _ngZone = inject(NgZone);
+  private _cdr = inject(ChangeDetectorRef);
+
   elementOrigin = this.formatOrigin(null);
   subtreeOrigin = this.formatOrigin(null);
 
-  constructor(
-    private _ngZone: NgZone,
-    private _cdr: ChangeDetectorRef,
-  ) {}
-
   formatOrigin(origin: FocusOrigin): string {
     return origin ? origin + ' focused' : 'blurred';
   }

src/components-examples/cdk/a11y/focus-monitor-focus-via/focus-monitor-focus-via-example.ts

@@ -1,4 +1,3 @@
-import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {
   AfterViewInit,
   ChangeDetectorRef,
@@ -7,7 +6,9 @@ import {
   NgZone,
   OnDestroy,
   ViewChild,
+  inject,
 } from '@angular/core';
+import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -20,16 +21,14 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   imports: [MatFormFieldModule, MatSelectModule],
 })
 export class FocusMonitorFocusViaExample implements OnDestroy, AfterViewInit {
+  focusMonitor = inject(FocusMonitor);
+  private _cdr = inject(ChangeDetectorRef);
+  private _ngZone = inject(NgZone);
+
   @ViewChild('monitored') monitoredEl: ElementRef<HTMLElement>;
 
   origin = this.formatOrigin(null);
 
-  constructor(
-    public focusMonitor: FocusMonitor,
-    private _cdr: ChangeDetectorRef,
-    private _ngZone: NgZone,
-  ) {}
-
   ngAfterViewInit() {
     this.focusMonitor.monitor(this.monitoredEl).subscribe(origin =>
       this._ngZone.run(() => {

src/components-examples/cdk/a11y/focus-monitor-overview/focus-monitor-overview-example.ts

@@ -1,4 +1,3 @@
-import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {
   AfterViewInit,
   ChangeDetectorRef,
@@ -7,7 +6,9 @@ import {
   NgZone,
   OnDestroy,
   ViewChild,
+  inject,
 } from '@angular/core';
+import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 
 /** @title Monitoring focus with FocusMonitor */
 @Component({
@@ -17,18 +18,16 @@ import {
   standalone: true,
 })
 export class FocusMonitorOverviewExample implements OnDestroy, AfterViewInit {
+  private _focusMonitor = inject(FocusMonitor);
+  private _cdr = inject(ChangeDetectorRef);
+  private _ngZone = inject(NgZone);
+
   @ViewChild('element') element: ElementRef<HTMLElement>;
   @ViewChild('subtree') subtree: ElementRef<HTMLElement>;
 
   elementOrigin = this.formatOrigin(null);
   subtreeOrigin = this.formatOrigin(null);
 
-  constructor(
-    private _focusMonitor: FocusMonitor,
-    private _cdr: ChangeDetectorRef,
-    private _ngZone: NgZone,
-  ) {}
-
   ngAfterViewInit() {
     this._focusMonitor.monitor(this.element).subscribe(origin =>
       this._ngZone.run(() => {

src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example.ts

@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {Dialog, DIALOG_DATA, DialogModule} from '@angular/cdk/dialog';
 
 export interface DialogData {
@@ -15,7 +15,7 @@ export interface DialogData {
   imports: [DialogModule],
 })
 export class CdkDialogDataExample {
-  constructor(public dialog: Dialog) {}
+  dialog = inject(Dialog);
 
   openDialog() {
     this.dialog.open(CdkDialogDataExampleDialog, {
@@ -34,5 +34,5 @@ export class CdkDialogDataExample {
   standalone: true,
 })
 export class CdkDialogDataExampleDialog {
-  constructor(@Inject(DIALOG_DATA) public data: DialogData) {}
+  data = inject(DIALOG_DATA);
 }

src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.ts

@@ -1,4 +1,4 @@
-import {Component, Inject} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {Dialog, DialogRef, DIALOG_DATA, DialogModule} from '@angular/cdk/dialog';
 import {FormsModule} from '@angular/forms';
 
@@ -17,11 +17,11 @@ export interface DialogData {
   imports: [FormsModule, DialogModule],
 })
 export class CdkDialogOverviewExample {
+  dialog = inject(Dialog);
+
   animal: string | undefined;
   name: string;
 
-  constructor(public dialog: Dialog) {}
-
   openDialog(): void {
     const dialogRef = this.dialog.open<string>(CdkDialogOverviewExampleDialog, {
       width: '250px',
@@ -43,8 +43,6 @@ export class CdkDialogOverviewExample {
   imports: [FormsModule],
 })
 export class CdkDialogOverviewExampleDialog {
-  constructor(
-    public dialogRef: DialogRef<string>,
-    @Inject(DIALOG_DATA) public data: DialogData,
-  ) {}
+  dialogRef = inject<DialogRef<string>>(DialogRef<string>);
+  data = inject(DIALOG_DATA);
 }

src/components-examples/cdk/dialog/cdk-dialog-styling/cdk-dialog-styling-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {Dialog, DialogModule, DialogRef} from '@angular/cdk/dialog';
 
 /**
@@ -11,7 +11,7 @@ import {Dialog, DialogModule, DialogRef} from '@angular/cdk/dialog';
   imports: [DialogModule],
 })
 export class CdkDialogStylingExample {
-  constructor(public dialog: Dialog) {}
+  dialog = inject(Dialog);
 
   openDialog(): void {
     this.dialog.open<string>(CdkDialogStylingExampleDialog);
@@ -25,5 +25,5 @@ export class CdkDialogStylingExample {
   standalone: true,
 })
 export class CdkDialogStylingExampleDialog {
-  constructor(public dialogRef: DialogRef) {}
+  dialogRef = inject(DialogRef);
 }

src/components-examples/cdk/drag-drop/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.ts

@@ -5,6 +5,7 @@ import {
   AfterViewInit,
   ViewContainerRef,
   OnDestroy,
+  inject,
 } from '@angular/core';
 import {Overlay, OverlayRef} from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
@@ -21,15 +22,13 @@ import {CdkDrag} from '@angular/cdk/drag-drop';
   imports: [CdkDrag],
 })
 export class CdkDragDropRootElementExample implements AfterViewInit, OnDestroy {
+  private _overlay = inject(Overlay);
+  private _viewContainerRef = inject(ViewContainerRef);
+
   @ViewChild(TemplateRef) _dialogTemplate: TemplateRef<any>;
   private _overlayRef: OverlayRef;
   private _portal: TemplatePortal;
 
-  constructor(
-    private _overlay: Overlay,
-    private _viewContainerRef: ViewContainerRef,
-  ) {}
-
   ngAfterViewInit() {
     this._portal = new TemplatePortal(this._dialogTemplate, this._viewContainerRef);
     this._overlayRef = this._overlay.create({

src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts

@@ -1,5 +1,5 @@
+import {Component, OnDestroy, inject} from '@angular/core';
 import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
-import {Component, OnDestroy} from '@angular/core';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
@@ -23,8 +23,8 @@ export class BreakpointObserverOverviewExample implements OnDestroy {
     [Breakpoints.XLarge, 'XLarge'],
   ]);
 
-  constructor(breakpointObserver: BreakpointObserver) {
-    breakpointObserver
+  constructor() {
+    inject(BreakpointObserver)
       .observe([
         Breakpoints.XSmall,
         Breakpoints.Small,

src/components-examples/cdk/platform/cdk-platform-overview/cdk-platform-overview-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {
   getSupportedInputTypes,
   Platform,
@@ -15,9 +15,9 @@ import {
   standalone: true,
 })
 export class CdkPlatformOverviewExample {
+  platform = inject(Platform);
+
   supportedInputTypes = Array.from(getSupportedInputTypes()).join(', ');
   supportsPassiveEventListeners = supportsPassiveEventListeners();
   supportsScrollBehavior = supportsScrollBehavior();
-
-  constructor(public platform: Platform) {}
 }

src/components-examples/cdk/portal/cdk-portal-overview/cdk-portal-overview-example.ts

@@ -5,6 +5,7 @@ import {
   ViewChild,
   ViewContainerRef,
   ElementRef,
+  inject,
 } from '@angular/core';
 import {
   ComponentPortal,
@@ -25,6 +26,8 @@ import {
   imports: [PortalModule],
 })
 export class CdkPortalOverviewExample implements AfterViewInit {
+  private _viewContainerRef = inject(ViewContainerRef);
+
   @ViewChild('templatePortalContent') templatePortalContent: TemplateRef<unknown>;
   @ViewChild('domPortalContent') domPortalContent: ElementRef<HTMLElement>;
 
@@ -33,8 +36,6 @@ export class CdkPortalOverviewExample implements AfterViewInit {
   templatePortal: TemplatePortal<any>;
   domPortal: DomPortal<any>;
 
-  constructor(private _viewContainerRef: ViewContainerRef) {}
-
   ngAfterViewInit() {
     this.componentPortal = new ComponentPortal(ComponentPortalExample);
     this.templatePortal = new TemplatePortal(this.templatePortalContent, this._viewContainerRef);

src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts

@@ -1,4 +1,4 @@
-import {Component, forwardRef} from '@angular/core';
+import {Component, forwardRef, inject} from '@angular/core';
 import {CdkStepper, CdkStepperModule} from '@angular/cdk/stepper';
 import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {NgTemplateOutlet} from '@angular/common';
@@ -17,6 +17,8 @@ import {NgTemplateOutlet} from '@angular/common';
   ],
 })
 export class CdkLinearStepperWithFormExample {
+  private readonly _formBuilder = inject(FormBuilder);
+
   isLinear = true;
   firstFormGroup = this._formBuilder.group({
     firstControl: ['', Validators.required],
@@ -25,8 +27,6 @@ export class CdkLinearStepperWithFormExample {
     secondControl: ['', Validators.required],
   });
 
-  constructor(private readonly _formBuilder: FormBuilder) {}
-
   toggleLinearity() {
     this.isLinear = !this.isLinear;
   }

src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.ts

@@ -1,5 +1,5 @@
+import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild, inject} from '@angular/core';
 import {AutofillMonitor} from '@angular/cdk/text-field';
-import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -13,13 +13,13 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   imports: [MatFormFieldModule, MatInputModule, MatButtonModule],
 })
 export class TextFieldAutofillMonitorExample implements AfterViewInit, OnDestroy {
+  private _autofill = inject(AutofillMonitor);
+
   @ViewChild('first', {read: ElementRef}) firstName: ElementRef<HTMLElement>;
   @ViewChild('last', {read: ElementRef}) lastName: ElementRef<HTMLElement>;
   firstNameAutofilled: boolean;
   lastNameAutofilled: boolean;
 
-  constructor(private _autofill: AutofillMonitor) {}
-
   ngAfterViewInit() {
     this._autofill
       .monitor(this.firstName)

src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {DataSource} from '@angular/cdk/collections';
 import {FormValueContainer, CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
 import {NgForm, FormsModule} from '@angular/forms';
@@ -221,6 +221,8 @@ const FANTASY_ELEMENTS: readonly FantasyElement[] = [
   ],
 })
 export class PopoverEditMatTableExample {
+  private readonly _snackBar = inject(MatSnackBar);
+
   displayedColumns: string[] = [
     'position',
     'name',
@@ -241,8 +243,6 @@ export class PopoverEditMatTableExample {
   readonly typeValues = new FormValueContainer<PeriodicElement, any>();
   readonly fantasyValues = new FormValueContainer<PeriodicElement, any>();
 
-  constructor(private readonly _snackBar: MatSnackBar) {}
-
   onSubmitName(element: PeriodicElement, f: NgForm) {
     if (!f.valid) {
       return;

src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, inject} from '@angular/core';
 import {FormBuilder, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {startWith, map} from 'rxjs/operators';
@@ -35,6 +35,8 @@ export const _filter = (opt: string[], value: string): string[] => {
   ],
 })
 export class AutocompleteOptgroupExample implements OnInit {
+  private _formBuilder = inject(FormBuilder);
+
   stateForm = this._formBuilder.group({
     stateGroup: '',
   });
@@ -138,8 +140,6 @@ export class AutocompleteOptgroupExample implements OnInit {
 
   stateGroupOptions: Observable<StateGroup[]>;
 
-  constructor(private _formBuilder: FormBuilder) {}
-
   ngOnInit() {
     this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges.pipe(
       startWith(''),

src/components-examples/material/bottom-sheet/bottom-sheet-harness/bottom-sheet-harness-example.ts

@@ -1,4 +1,4 @@
-import {Component, TemplateRef, ViewChild} from '@angular/core';
+import {Component, TemplateRef, ViewChild, inject} from '@angular/core';
 import {
   MatBottomSheet,
   MatBottomSheetConfig,
@@ -15,9 +15,9 @@ import {
   imports: [MatBottomSheetModule],
 })
 export class BottomSheetHarnessExample {
-  @ViewChild(TemplateRef) template: TemplateRef<any>;
+  readonly bottomSheet = inject(MatBottomSheet);
 
-  constructor(readonly bottomSheet: MatBottomSheet) {}
+  @ViewChild(TemplateRef) template: TemplateRef<any>;
 
   open(config?: MatBottomSheetConfig) {
     return this.bottomSheet.open(this.template, config);