From 1c9dcb4c3096e29fa042f117857a68e9b7fd1879 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 29 Jul 2024 09:02:56 +0200 Subject: [PATCH] docs: switch all examples to use inject (#29495) Updates all of the docs examples to use `inject` instead of constructor-based injection. --- .../focus-monitor-directives-example.ts | 10 ++++----- .../focus-monitor-focus-via-example.ts | 13 ++++++------ .../focus-monitor-overview-example.ts | 13 ++++++------ .../cdk-dialog-data-example.ts | 6 +++--- .../cdk-dialog-overview-example.ts | 12 +++++------ .../cdk-dialog-styling-example.ts | 6 +++--- .../cdk-drag-drop-root-element-example.ts | 9 ++++---- .../breakpoint-observer-overview-example.ts | 6 +++--- .../cdk-platform-overview-example.ts | 6 +++--- .../cdk-portal-overview-example.ts | 5 +++-- .../cdk-linear-stepper-with-form-example.ts | 6 +++--- .../text-field-autofill-monitor-example.ts | 6 +++--- .../popover-edit-mat-table-example.ts | 6 +++--- .../autocomplete-optgroup-example.ts | 6 +++--- .../bottom-sheet-harness-example.ts | 6 +++--- .../bottom-sheet-overview-example.ts | 7 ++++--- ...range-picker-selection-strategy-example.ts | 4 ++-- .../datepicker-custom-header-example.ts | 21 +++++++------------ .../datepicker-dialog-example.ts | 18 +++++++++------- .../dialog/dialog-data/dialog-data-example.ts | 6 +++--- .../icon/icon-svg/icon-svg-example.ts | 7 +++++-- .../sidenav-fixed/sidenav-fixed-example.ts | 6 +++--- .../sidenav-responsive-example.ts | 7 +++++-- .../slide-toggle-forms-example.ts | 6 +++--- .../snack-bar-annotated-component-example.ts | 4 ++-- .../snack-bar-component-example.ts | 6 +++--- .../snack-bar-harness-example.ts | 4 ++-- .../snack-bar-overview-example.ts | 4 ++-- .../snack-bar-position-example.ts | 6 +++--- .../stepper-animations-example.ts | 5 +++-- .../stepper-editable-example.ts | 6 +++--- .../stepper-errors/stepper-errors-example.ts | 6 +++--- .../stepper-header-position-example.ts | 6 +++--- .../stepper-intl/stepper-intl-example.ts | 10 ++++----- .../stepper-label-position-bottom-example.ts | 6 +++--- .../stepper-optional-example.ts | 6 +++--- .../stepper-overview-example.ts | 6 +++--- .../stepper-responsive-example.ts | 11 +++++----- .../stepper-states/stepper-states-example.ts | 6 +++--- .../stepper-vertical-example.ts | 6 +++--- .../table/table-http/table-http-example.ts | 6 +++--- .../table-sorting/table-sorting-example.ts | 6 +++--- .../tree/tree-dynamic/tree-dynamic-example.ts | 6 ++++-- .../tree-loadmore/tree-loadmore-example.ts | 8 +++++-- 44 files changed, 164 insertions(+), 158 deletions(-) diff --git a/src/components-examples/cdk/a11y/focus-monitor-directives/focus-monitor-directives-example.ts b/src/components-examples/cdk/a11y/focus-monitor-directives/focus-monitor-directives-example.ts index 17bc54a87fff..8d6fd08ca444 100644 --- a/src/components-examples/cdk/a11y/focus-monitor-directives/focus-monitor-directives-example.ts +++ b/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'; } diff --git a/src/components-examples/cdk/a11y/focus-monitor-focus-via/focus-monitor-focus-via-example.ts b/src/components-examples/cdk/a11y/focus-monitor-focus-via/focus-monitor-focus-via-example.ts index 272a3a93dfb0..619eb3ed7e75 100644 --- a/src/components-examples/cdk/a11y/focus-monitor-focus-via/focus-monitor-focus-via-example.ts +++ b/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; 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(() => { diff --git a/src/components-examples/cdk/a11y/focus-monitor-overview/focus-monitor-overview-example.ts b/src/components-examples/cdk/a11y/focus-monitor-overview/focus-monitor-overview-example.ts index 81131b9b994f..e1ac5e814bb2 100644 --- a/src/components-examples/cdk/a11y/focus-monitor-overview/focus-monitor-overview-example.ts +++ b/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; @ViewChild('subtree') subtree: ElementRef; 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(() => { diff --git a/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example.ts b/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example.ts index cc48c8f03fc2..a50641a03ef6 100644 --- a/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example.ts +++ b/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); } diff --git a/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.ts b/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.ts index 7d361e850ede..6749a0731eaf 100644 --- a/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.ts +++ b/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(CdkDialogOverviewExampleDialog, { width: '250px', @@ -43,8 +43,6 @@ export class CdkDialogOverviewExample { imports: [FormsModule], }) export class CdkDialogOverviewExampleDialog { - constructor( - public dialogRef: DialogRef, - @Inject(DIALOG_DATA) public data: DialogData, - ) {} + dialogRef = inject>(DialogRef); + data = inject(DIALOG_DATA); } diff --git a/src/components-examples/cdk/dialog/cdk-dialog-styling/cdk-dialog-styling-example.ts b/src/components-examples/cdk/dialog/cdk-dialog-styling/cdk-dialog-styling-example.ts index 41605df4e7e8..e2965776f61e 100644 --- a/src/components-examples/cdk/dialog/cdk-dialog-styling/cdk-dialog-styling-example.ts +++ b/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(CdkDialogStylingExampleDialog); @@ -25,5 +25,5 @@ export class CdkDialogStylingExample { standalone: true, }) export class CdkDialogStylingExampleDialog { - constructor(public dialogRef: DialogRef) {} + dialogRef = inject(DialogRef); } diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.ts index b1aefbd85a92..4ac0971f2d80 100644 --- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.ts +++ b/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; 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({ diff --git a/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts b/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts index 097b05435873..f4ab9719cf7f 100644 --- a/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts +++ b/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, diff --git a/src/components-examples/cdk/platform/cdk-platform-overview/cdk-platform-overview-example.ts b/src/components-examples/cdk/platform/cdk-platform-overview/cdk-platform-overview-example.ts index ac099a7f1982..3caf30d5ba00 100644 --- a/src/components-examples/cdk/platform/cdk-platform-overview/cdk-platform-overview-example.ts +++ b/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) {} } diff --git a/src/components-examples/cdk/portal/cdk-portal-overview/cdk-portal-overview-example.ts b/src/components-examples/cdk/portal/cdk-portal-overview/cdk-portal-overview-example.ts index e9ef6df87837..6bc546a8eaf3 100644 --- a/src/components-examples/cdk/portal/cdk-portal-overview/cdk-portal-overview-example.ts +++ b/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; @ViewChild('domPortalContent') domPortalContent: ElementRef; @@ -33,8 +36,6 @@ export class CdkPortalOverviewExample implements AfterViewInit { templatePortal: TemplatePortal; domPortal: DomPortal; - constructor(private _viewContainerRef: ViewContainerRef) {} - ngAfterViewInit() { this.componentPortal = new ComponentPortal(ComponentPortalExample); this.templatePortal = new TemplatePortal(this.templatePortalContent, this._viewContainerRef); diff --git a/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts b/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts index b4feeb885c4a..da9df3fe9229 100644 --- a/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts +++ b/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; } diff --git a/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.ts b/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.ts index 4c0c0b93cc58..70ea342ef361 100644 --- a/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.ts +++ b/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; @ViewChild('last', {read: ElementRef}) lastName: ElementRef; firstNameAutofilled: boolean; lastNameAutofilled: boolean; - constructor(private _autofill: AutofillMonitor) {} - ngAfterViewInit() { this._autofill .monitor(this.firstName) diff --git a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts index 07ca564f853a..9655f251fae3 100644 --- a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts +++ b/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(); readonly fantasyValues = new FormValueContainer(); - constructor(private readonly _snackBar: MatSnackBar) {} - onSubmitName(element: PeriodicElement, f: NgForm) { if (!f.valid) { return; diff --git a/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts b/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts index f413f5755fae..a44bd98b3f92 100644 --- a/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts +++ b/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; - constructor(private _formBuilder: FormBuilder) {} - ngOnInit() { this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges.pipe( startWith(''), diff --git a/src/components-examples/material/bottom-sheet/bottom-sheet-harness/bottom-sheet-harness-example.ts b/src/components-examples/material/bottom-sheet/bottom-sheet-harness/bottom-sheet-harness-example.ts index 7751a361655e..0eda7e6fc4eb 100644 --- a/src/components-examples/material/bottom-sheet/bottom-sheet-harness/bottom-sheet-harness-example.ts +++ b/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; + readonly bottomSheet = inject(MatBottomSheet); - constructor(readonly bottomSheet: MatBottomSheet) {} + @ViewChild(TemplateRef) template: TemplateRef; open(config?: MatBottomSheetConfig) { return this.bottomSheet.open(this.template, config); diff --git a/src/components-examples/material/bottom-sheet/bottom-sheet-overview/bottom-sheet-overview-example.ts b/src/components-examples/material/bottom-sheet/bottom-sheet-overview/bottom-sheet-overview-example.ts index 744525b97479..3a9a9a4b5ced 100644 --- a/src/components-examples/material/bottom-sheet/bottom-sheet-overview/bottom-sheet-overview-example.ts +++ b/src/components-examples/material/bottom-sheet/bottom-sheet-overview/bottom-sheet-overview-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import { MatBottomSheet, MatBottomSheetModule, @@ -17,7 +17,7 @@ import {MatButtonModule} from '@angular/material/button'; imports: [MatButtonModule, MatBottomSheetModule], }) export class BottomSheetOverviewExample { - constructor(private _bottomSheet: MatBottomSheet) {} + private _bottomSheet = inject(MatBottomSheet); openBottomSheet(): void { this._bottomSheet.open(BottomSheetOverviewExampleSheet); @@ -31,7 +31,8 @@ export class BottomSheetOverviewExample { imports: [MatListModule], }) export class BottomSheetOverviewExampleSheet { - constructor(private _bottomSheetRef: MatBottomSheetRef) {} + private _bottomSheetRef = + inject>(MatBottomSheetRef); openLink(event: MouseEvent): void { this._bottomSheetRef.dismiss(); diff --git a/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.ts b/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.ts index 7f18ade38e3f..1d647ffb7769 100644 --- a/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.ts +++ b/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component, Injectable} from '@angular/core'; +import {ChangeDetectionStrategy, Component, Injectable, inject} from '@angular/core'; import {DateAdapter, provideNativeDateAdapter} from '@angular/material/core'; import { DateRange, @@ -10,7 +10,7 @@ import {MatFormFieldModule} from '@angular/material/form-field'; @Injectable() export class FiveDayRangeSelectionStrategy implements MatDateRangeSelectionStrategy { - constructor(private _dateAdapter: DateAdapter) {} + private _dateAdapter = inject>(DateAdapter); selectionFinished(date: D | null): DateRange { return this._createFiveDayRange(date); diff --git a/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts b/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts index b3dc89f5d8a2..99ef0cceeb07 100644 --- a/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts +++ b/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts @@ -1,11 +1,6 @@ -import {ChangeDetectionStrategy, Component, Inject, OnDestroy, signal} from '@angular/core'; +import {ChangeDetectionStrategy, Component, OnDestroy, signal, inject} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; -import { - DateAdapter, - MAT_DATE_FORMATS, - MatDateFormats, - provideNativeDateAdapter, -} from '@angular/material/core'; +import {DateAdapter, MAT_DATE_FORMATS, provideNativeDateAdapter} from '@angular/material/core'; import {MatCalendar, MatDatepickerModule} from '@angular/material/datepicker'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatIconModule} from '@angular/material/icon'; @@ -65,16 +60,16 @@ export class DatepickerCustomHeaderExample { changeDetection: ChangeDetectionStrategy.OnPush, }) export class ExampleHeader implements OnDestroy { + private _calendar = inject>(MatCalendar); + private _dateAdapter = inject>(DateAdapter); + private _dateFormats = inject(MAT_DATE_FORMATS); + private _destroyed = new Subject(); readonly periodLabel = signal(''); - constructor( - private _calendar: MatCalendar, - private _dateAdapter: DateAdapter, - @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats, - ) { - _calendar.stateChanges.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => { + constructor() { + this._calendar.stateChanges.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => { this.periodLabel.set( this._dateAdapter .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel) diff --git a/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.ts b/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.ts index 23c148cac64a..6801d72c11fb 100644 --- a/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.ts +++ b/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component, Inject, model} from '@angular/core'; +import {ChangeDetectionStrategy, Component, model, inject} from '@angular/core'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import { @@ -24,9 +24,9 @@ export interface DialogData { changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatepickerDialogExample { - selectedDate = model(null); + dialog = inject(MatDialog); - constructor(public dialog: MatDialog) {} + selectedDate = model(null); openDialog() { const dialogRef = this.dialog.open(DatepickerDialogExampleDialog, { @@ -58,12 +58,16 @@ export class DatepickerDialogExample { ], }) export class DatepickerDialogExampleDialog { + dialogRef = inject>( + MatDialogRef, + ); + data = inject(MAT_DIALOG_DATA); + readonly date = new FormControl(new Date()); - constructor( - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: DialogData, - ) { + constructor() { + const data = this.data; + this.date.setValue(data.selectedDate); } } diff --git a/src/components-examples/material/dialog/dialog-data/dialog-data-example.ts b/src/components-examples/material/dialog/dialog-data/dialog-data-example.ts index edbe500323ec..37ada3e6e5ce 100644 --- a/src/components-examples/material/dialog/dialog-data/dialog-data-example.ts +++ b/src/components-examples/material/dialog/dialog-data/dialog-data-example.ts @@ -1,4 +1,4 @@ -import {Component, Inject} from '@angular/core'; +import {Component, inject} from '@angular/core'; import { MatDialog, MAT_DIALOG_DATA, @@ -21,7 +21,7 @@ export interface DialogData { imports: [MatButtonModule], }) export class DialogDataExample { - constructor(public dialog: MatDialog) {} + dialog = inject(MatDialog); openDialog() { this.dialog.open(DialogDataExampleDialog, { @@ -39,5 +39,5 @@ export class DialogDataExample { imports: [MatDialogTitle, MatDialogContent], }) export class DialogDataExampleDialog { - constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {} + data = inject(MAT_DIALOG_DATA); } diff --git a/src/components-examples/material/icon/icon-svg/icon-svg-example.ts b/src/components-examples/material/icon/icon-svg/icon-svg-example.ts index e278cbc50b1c..16aba5195f6a 100644 --- a/src/components-examples/material/icon/icon-svg/icon-svg-example.ts +++ b/src/components-examples/material/icon/icon-svg/icon-svg-example.ts @@ -1,4 +1,4 @@ -import {ChangeDetectionStrategy, Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {DomSanitizer} from '@angular/platform-browser'; import {MatIconRegistry, MatIconModule} from '@angular/material/icon'; @@ -23,7 +23,10 @@ const THUMBUP_ICON = changeDetection: ChangeDetectionStrategy.OnPush, }) export class IconSvgExample { - constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) { + constructor() { + const iconRegistry = inject(MatIconRegistry); + const sanitizer = inject(DomSanitizer); + // Note that we provide the icon here as a string literal here due to a limitation in // Stackblitz. If you want to provide the icon from a URL, you can use: // `iconRegistry.addSvgIcon('thumbs-up', sanitizer.bypassSecurityTrustResourceUrl('icon.svg'));` diff --git a/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts b/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts index 272a5c0c3785..a579c2feec9d 100644 --- a/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts +++ b/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {FormBuilder, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -25,13 +25,13 @@ import {MatInputModule} from '@angular/material/input'; ], }) export class SidenavFixedExample { + private _formBuilder = inject(FormBuilder); + options = this._formBuilder.group({ bottom: 0, fixed: false, top: 0, }); - constructor(private _formBuilder: FormBuilder) {} - shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host); } diff --git a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts index 82f693b9b729..015a0704907a 100644 --- a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts +++ b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts @@ -1,5 +1,5 @@ import {MediaMatcher} from '@angular/cdk/layout'; -import {ChangeDetectorRef, Component, OnDestroy} from '@angular/core'; +import {ChangeDetectorRef, Component, OnDestroy, inject} from '@angular/core'; import {MatListModule} from '@angular/material/list'; import {MatSidenavModule} from '@angular/material/sidenav'; import {MatIconModule} from '@angular/material/icon'; @@ -31,7 +31,10 @@ export class SidenavResponsiveExample implements OnDestroy { private _mobileQueryListener: () => void; - constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) { + constructor() { + const changeDetectorRef = inject(ChangeDetectorRef); + const media = inject(MediaMatcher); + this.mobileQuery = media.matchMedia('(max-width: 600px)'); this._mobileQueryListener = () => changeDetectorRef.detectChanges(); this.mobileQuery.addListener(this._mobileQueryListener); diff --git a/src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.ts b/src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.ts index 19ed7a188731..52836040928b 100644 --- a/src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.ts +++ b/src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import { @@ -23,14 +23,14 @@ import { ], }) export class SlideToggleFormsExample { + private _formBuilder = inject(FormBuilder); + isChecked = true; formGroup = this._formBuilder.group({ enableWifi: '', acceptTerms: ['', Validators.requiredTrue], }); - constructor(private _formBuilder: FormBuilder) {} - alertFormValues(formGroup: FormGroup) { alert(JSON.stringify(formGroup.value, null, 2)); } diff --git a/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.ts b/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.ts index 885908aace23..f9e5b93e249e 100644 --- a/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.ts +++ b/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.ts @@ -22,9 +22,9 @@ import {MatFormFieldModule} from '@angular/material/form-field'; imports: [MatFormFieldModule, FormsModule, MatInputModule, MatButtonModule], }) export class SnackBarAnnotatedComponentExample { - durationInSeconds = 5; + private _snackBar = inject(MatSnackBar); - constructor(private _snackBar: MatSnackBar) {} + durationInSeconds = 5; openSnackBar() { this._snackBar.openFromComponent(PizzaPartyAnnotatedComponent, { diff --git a/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.ts b/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.ts index 43a54e4abe72..4e1f13cd7437 100644 --- a/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.ts +++ b/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {MatSnackBar} from '@angular/material/snack-bar'; import {MatButtonModule} from '@angular/material/button'; import {MatInputModule} from '@angular/material/input'; @@ -16,9 +16,9 @@ import {MatFormFieldModule} from '@angular/material/form-field'; imports: [MatFormFieldModule, FormsModule, MatInputModule, MatButtonModule], }) export class SnackBarComponentExample { - durationInSeconds = 5; + private _snackBar = inject(MatSnackBar); - constructor(private _snackBar: MatSnackBar) {} + durationInSeconds = 5; openSnackBar() { this._snackBar.openFromComponent(PizzaPartyComponent, { diff --git a/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.ts b/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.ts index b95db9a4f45e..9a31708ca94c 100644 --- a/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.ts +++ b/src/components-examples/material/snack-bar/snack-bar-harness/snack-bar-harness-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {MatSnackBar, MatSnackBarConfig} from '@angular/material/snack-bar'; /** @@ -10,7 +10,7 @@ import {MatSnackBar, MatSnackBarConfig} from '@angular/material/snack-bar'; standalone: true, }) export class SnackBarHarnessExample { - constructor(readonly snackBar: MatSnackBar) {} + readonly snackBar = inject(MatSnackBar); open(message: string, action = '', config?: MatSnackBarConfig) { return this.snackBar.open(message, action, config); diff --git a/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.ts b/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.ts index fbeb088068a8..63cdd38b55ac 100644 --- a/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.ts +++ b/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {MatSnackBar} from '@angular/material/snack-bar'; import {MatButtonModule} from '@angular/material/button'; import {MatInputModule} from '@angular/material/input'; @@ -15,7 +15,7 @@ import {MatFormFieldModule} from '@angular/material/form-field'; imports: [MatFormFieldModule, MatInputModule, MatButtonModule], }) export class SnackBarOverviewExample { - constructor(private _snackBar: MatSnackBar) {} + private _snackBar = inject(MatSnackBar); openSnackBar(message: string, action: string) { this._snackBar.open(message, action); diff --git a/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.ts b/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.ts index f6dc8acd1e0b..c51aa36e848d 100644 --- a/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.ts +++ b/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import { MatSnackBar, MatSnackBarHorizontalPosition, @@ -19,11 +19,11 @@ import {MatFormFieldModule} from '@angular/material/form-field'; imports: [MatFormFieldModule, MatSelectModule, MatButtonModule], }) export class SnackBarPositionExample { + private _snackBar = inject(MatSnackBar); + horizontalPosition: MatSnackBarHorizontalPosition = 'start'; verticalPosition: MatSnackBarVerticalPosition = 'bottom'; - constructor(private _snackBar: MatSnackBar) {} - openSnackBar() { this._snackBar.open('Cannonball!!', 'Splash', { horizontalPosition: this.horizontalPosition, diff --git a/src/components-examples/material/stepper/stepper-animations/stepper-animations-example.ts b/src/components-examples/material/stepper/stepper-animations/stepper-animations-example.ts index ee3c525cdd29..c2ab5ab6b242 100644 --- a/src/components-examples/material/stepper/stepper-animations/stepper-animations-example.ts +++ b/src/components-examples/material/stepper/stepper-animations/stepper-animations-example.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {FormBuilder, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatInputModule} from '@angular/material/input'; @@ -31,7 +31,8 @@ import {MatStepperModule} from '@angular/material/stepper'; ], }) export class StepperAnimationsExample { - constructor(private _formBuilder: FormBuilder) {} + private _formBuilder = inject(FormBuilder); + firstFormGroup: FormGroup = this._formBuilder.group({firstCtrl: ['']}); secondFormGroup: FormGroup = this._formBuilder.group({secondCtrl: ['']}); } diff --git a/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.ts b/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.ts index 23faf1b45430..5ff1a7670791 100644 --- a/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.ts +++ b/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatInputModule} from '@angular/material/input'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -23,6 +23,8 @@ import {MatButtonModule} from '@angular/material/button'; ], }) export class StepperEditableExample { + private _formBuilder = inject(FormBuilder); + firstFormGroup = this._formBuilder.group({ firstCtrl: ['', Validators.required], }); @@ -30,6 +32,4 @@ export class StepperEditableExample { secondCtrl: ['', Validators.required], }); isEditable = false; - - constructor(private _formBuilder: FormBuilder) {} } diff --git a/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.ts b/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.ts index b94ea21bf20a..634bef95eb51 100644 --- a/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.ts +++ b/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper'; import {MatButtonModule} from '@angular/material/button'; @@ -30,12 +30,12 @@ import {MatStepperModule} from '@angular/material/stepper'; ], }) export class StepperErrorsExample { + private _formBuilder = inject(FormBuilder); + firstFormGroup = this._formBuilder.group({ firstCtrl: ['', Validators.required], }); secondFormGroup = this._formBuilder.group({ secondCtrl: ['', Validators.required], }); - - constructor(private _formBuilder: FormBuilder) {} } diff --git a/src/components-examples/material/stepper/stepper-header-position/stepper-header-position-example.ts b/src/components-examples/material/stepper/stepper-header-position/stepper-header-position-example.ts index bc7161961238..c8f674713e71 100644 --- a/src/components-examples/material/stepper/stepper-header-position/stepper-header-position-example.ts +++ b/src/components-examples/material/stepper/stepper-header-position/stepper-header-position-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatInputModule} from '@angular/material/input'; @@ -22,12 +22,12 @@ import {MatStepperModule} from '@angular/material/stepper'; ], }) export class StepperHeaderPositionExample { + private _formBuilder = inject(FormBuilder); + firstFormGroup = this._formBuilder.group({ firstCtrl: ['', Validators.required], }); secondFormGroup = this._formBuilder.group({ secondCtrl: ['', Validators.required], }); - - constructor(private _formBuilder: FormBuilder) {} } diff --git a/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts b/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts index 22b826666054..a85b8de13a59 100644 --- a/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts +++ b/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts @@ -1,4 +1,4 @@ -import {Component, Injectable} from '@angular/core'; +import {Component, Injectable, inject} from '@angular/core'; import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatStepperIntl, MatStepperModule} from '@angular/material/stepper'; import {MatButtonModule} from '@angular/material/button'; @@ -32,6 +32,9 @@ export class StepperIntl extends MatStepperIntl { ], }) export class StepperIntlExample { + private _formBuilder = inject(FormBuilder); + private _matStepperIntl = inject(MatStepperIntl); + optionalLabelText: string; optionalLabelTextChoices: string[] = ['Option 1', 'Option 2', 'Option 3']; firstFormGroup = this._formBuilder.group({ @@ -41,11 +44,6 @@ export class StepperIntlExample { secondCtrl: ['', Validators.required], }); - constructor( - private _formBuilder: FormBuilder, - private _matStepperIntl: MatStepperIntl, - ) {} - updateOptionalLabel() { this._matStepperIntl.optionalLabel = this.optionalLabelText; // Required for the optional label text to be updated diff --git a/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.ts b/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.ts index 6e6cde358905..71bb273bf798 100644 --- a/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.ts +++ b/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatInputModule} from '@angular/material/input'; @@ -23,12 +23,12 @@ import {MatStepperModule} from '@angular/material/stepper'; ], }) export class StepperLabelPositionBottomExample { + private _formBuilder = inject(FormBuilder); + firstFormGroup = this._formBuilder.group({ firstCtrl: ['', Validators.required], }); secondFormGroup = this._formBuilder.group({ secondCtrl: ['', Validators.required], }); - - constructor(private _formBuilder: FormBuilder) {} } diff --git a/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.ts b/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.ts index 45cc07fd65dc..25d13a30166a 100644 --- a/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.ts +++ b/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatInputModule} from '@angular/material/input'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -23,6 +23,8 @@ import {MatButtonModule} from '@angular/material/button'; ], }) export class StepperOptionalExample { + private _formBuilder = inject(FormBuilder); + firstFormGroup = this._formBuilder.group({ firstCtrl: ['', Validators.required], }); @@ -30,6 +32,4 @@ export class StepperOptionalExample { secondCtrl: '', }); isOptional = false; - - constructor(private _formBuilder: FormBuilder) {} } diff --git a/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.ts b/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.ts index 2d2e8390b88a..46ba2744e0fa 100644 --- a/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.ts +++ b/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatInputModule} from '@angular/material/input'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -23,6 +23,8 @@ import {MatButtonModule} from '@angular/material/button'; ], }) export class StepperOverviewExample { + private _formBuilder = inject(FormBuilder); + firstFormGroup = this._formBuilder.group({ firstCtrl: ['', Validators.required], }); @@ -30,6 +32,4 @@ export class StepperOverviewExample { secondCtrl: ['', Validators.required], }); isLinear = false; - - constructor(private _formBuilder: FormBuilder) {} } diff --git a/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.ts b/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.ts index 84616f95450f..23adb2235b27 100644 --- a/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.ts +++ b/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {BreakpointObserver} from '@angular/cdk/layout'; import {StepperOrientation, MatStepperModule} from '@angular/material/stepper'; @@ -28,6 +28,8 @@ import {AsyncPipe} from '@angular/common'; ], }) export class StepperResponsiveExample { + private _formBuilder = inject(FormBuilder); + firstFormGroup = this._formBuilder.group({ firstCtrl: ['', Validators.required], }); @@ -39,10 +41,9 @@ export class StepperResponsiveExample { }); stepperOrientation: Observable; - constructor( - private _formBuilder: FormBuilder, - breakpointObserver: BreakpointObserver, - ) { + constructor() { + const breakpointObserver = inject(BreakpointObserver); + this.stepperOrientation = breakpointObserver .observe('(min-width: 800px)') .pipe(map(({matches}) => (matches ? 'horizontal' : 'vertical'))); diff --git a/src/components-examples/material/stepper/stepper-states/stepper-states-example.ts b/src/components-examples/material/stepper/stepper-states/stepper-states-example.ts index dd2a2b0b6bb4..aa5b4faa299d 100644 --- a/src/components-examples/material/stepper/stepper-states/stepper-states-example.ts +++ b/src/components-examples/material/stepper/stepper-states/stepper-states-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper'; import {MatIconModule} from '@angular/material/icon'; @@ -32,12 +32,12 @@ import {MatStepperModule} from '@angular/material/stepper'; ], }) export class StepperStatesExample { + private _formBuilder = inject(FormBuilder); + firstFormGroup = this._formBuilder.group({ firstCtrl: ['', Validators.required], }); secondFormGroup = this._formBuilder.group({ secondCtrl: ['', Validators.required], }); - - constructor(private _formBuilder: FormBuilder) {} } diff --git a/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.ts b/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.ts index 6628dc6dfb55..6b29f8990694 100644 --- a/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.ts +++ b/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, inject} from '@angular/core'; import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatInputModule} from '@angular/material/input'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -23,6 +23,8 @@ import {MatButtonModule} from '@angular/material/button'; ], }) export class StepperVerticalExample { + private _formBuilder = inject(FormBuilder); + firstFormGroup = this._formBuilder.group({ firstCtrl: ['', Validators.required], }); @@ -30,6 +32,4 @@ export class StepperVerticalExample { secondCtrl: ['', Validators.required], }); isLinear = false; - - constructor(private _formBuilder: FormBuilder) {} } diff --git a/src/components-examples/material/table/table-http/table-http-example.ts b/src/components-examples/material/table/table-http/table-http-example.ts index c2ffe5f81bd6..3342268dffa3 100644 --- a/src/components-examples/material/table/table-http/table-http-example.ts +++ b/src/components-examples/material/table/table-http/table-http-example.ts @@ -1,5 +1,5 @@ import {HttpClient} from '@angular/common/http'; -import {Component, ViewChild, AfterViewInit} from '@angular/core'; +import {Component, ViewChild, AfterViewInit, inject} from '@angular/core'; import {MatPaginator, MatPaginatorModule} from '@angular/material/paginator'; import {MatSort, MatSortModule, SortDirection} from '@angular/material/sort'; import {merge, Observable, of as observableOf} from 'rxjs'; @@ -19,6 +19,8 @@ import {DatePipe} from '@angular/common'; imports: [MatProgressSpinnerModule, MatTableModule, MatSortModule, MatPaginatorModule, DatePipe], }) export class TableHttpExample implements AfterViewInit { + private _httpClient = inject(HttpClient); + displayedColumns: string[] = ['created', 'state', 'number', 'title']; exampleDatabase: ExampleHttpDatabase | null; data: GithubIssue[] = []; @@ -30,8 +32,6 @@ export class TableHttpExample implements AfterViewInit { @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; - constructor(private _httpClient: HttpClient) {} - ngAfterViewInit() { this.exampleDatabase = new ExampleHttpDatabase(this._httpClient); diff --git a/src/components-examples/material/table/table-sorting/table-sorting-example.ts b/src/components-examples/material/table/table-sorting/table-sorting-example.ts index d865a8a897a9..55af74f4d651 100644 --- a/src/components-examples/material/table/table-sorting/table-sorting-example.ts +++ b/src/components-examples/material/table/table-sorting/table-sorting-example.ts @@ -1,5 +1,5 @@ import {LiveAnnouncer} from '@angular/cdk/a11y'; -import {AfterViewInit, Component, ViewChild} from '@angular/core'; +import {AfterViewInit, Component, ViewChild, inject} from '@angular/core'; import {MatSort, Sort, MatSortModule} from '@angular/material/sort'; import {MatTableDataSource, MatTableModule} from '@angular/material/table'; @@ -32,11 +32,11 @@ const ELEMENT_DATA: PeriodicElement[] = [ imports: [MatTableModule, MatSortModule], }) export class TableSortingExample implements AfterViewInit { + private _liveAnnouncer = inject(LiveAnnouncer); + displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; dataSource = new MatTableDataSource(ELEMENT_DATA); - constructor(private _liveAnnouncer: LiveAnnouncer) {} - @ViewChild(MatSort) sort: MatSort; ngAfterViewInit() { diff --git a/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts b/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts index 315002621fa8..cc359acf5ea7 100644 --- a/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts +++ b/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts @@ -1,6 +1,6 @@ import {CollectionViewer, SelectionChange, DataSource} from '@angular/cdk/collections'; import {FlatTreeControl} from '@angular/cdk/tree'; -import {ChangeDetectionStrategy, Component, Injectable} from '@angular/core'; +import {ChangeDetectionStrategy, Component, Injectable, inject} from '@angular/core'; import {BehaviorSubject, merge, Observable} from 'rxjs'; import {map} from 'rxjs/operators'; import {MatProgressBarModule} from '@angular/material/progress-bar'; @@ -145,7 +145,9 @@ export class DynamicDataSource implements DataSource { changeDetection: ChangeDetectionStrategy.OnPush, }) export class TreeDynamicExample { - constructor(database: DynamicDatabase) { + constructor() { + const database = inject(DynamicDatabase); + this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable); this.dataSource = new DynamicDataSource(this.treeControl, database); diff --git a/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.ts b/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.ts index ccc9062b2b54..4aba573cd8ef 100644 --- a/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.ts +++ b/src/components-examples/material/tree/tree-loadmore/tree-loadmore-example.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ import {FlatTreeControl} from '@angular/cdk/tree'; -import {ChangeDetectionStrategy, Component, Injectable} from '@angular/core'; +import {ChangeDetectionStrategy, Component, Injectable, inject} from '@angular/core'; import {MatTreeFlatDataSource, MatTreeFlattener, MatTreeModule} from '@angular/material/tree'; import {BehaviorSubject, Observable} from 'rxjs'; import {MatIconModule} from '@angular/material/icon'; @@ -133,13 +133,17 @@ export class LoadmoreDatabase { changeDetection: ChangeDetectionStrategy.OnPush, }) export class TreeLoadmoreExample { + private _database = inject(LoadmoreDatabase); + nodeMap = new Map(); treeControl: FlatTreeControl; treeFlattener: MatTreeFlattener; // Flat tree data source dataSource: MatTreeFlatDataSource; - constructor(private _database: LoadmoreDatabase) { + constructor() { + const _database = this._database; + this.treeFlattener = new MatTreeFlattener( this.transformer, this.getLevel,