From 305c2bc8b0aa4cb58f6ad36740625789e7634bb6 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sun, 28 Jul 2024 10:30:55 +0200 Subject: [PATCH] build: switch dev app to inject Changes the dev app to use `inject` instead of constructor-based injection. --- src/dev-app/autocomplete/autocomplete-demo.ts | 2 +- src/dev-app/bottom-sheet/bottom-sheet-demo.ts | 8 +++--- src/dev-app/cdk-dialog/dialog-demo.ts | 13 ++++------ src/dev-app/clipboard/clipboard-demo.ts | 6 ++--- .../connected-overlay-demo.ts | 11 ++++---- src/dev-app/datepicker/datepicker-demo.ts | 25 ++++++++++--------- src/dev-app/dev-app/dev-app-layout.ts | 19 +++++++------- src/dev-app/dialog/dialog-demo.ts | 23 ++++++++--------- src/dev-app/drag-drop/drag-drop-demo.ts | 7 ++++-- src/dev-app/example/example.ts | 19 +++++++------- src/dev-app/focus-origin/focus-origin-demo.ts | 4 +-- src/dev-app/focus-trap/focus-trap-demo.ts | 7 +++--- src/dev-app/google-map/google-map-demo.ts | 4 ++- src/dev-app/icon/icon-demo.ts | 7 ++++-- .../input-modality-detector-demo.ts | 5 +++- .../live-announcer/live-announcer-demo.ts | 8 +++--- src/dev-app/platform/platform-demo.ts | 6 ++--- src/dev-app/screen-type/screen-type-demo.ts | 6 +++-- src/dev-app/slider/slider-demo.ts | 14 +++-------- src/dev-app/snack-bar/snack-bar-demo.ts | 9 +++---- .../youtube-player/youtube-player-demo.ts | 4 ++- .../kitchen-sink/kitchen-sink.ts | 17 +++++++------ 22 files changed, 113 insertions(+), 111 deletions(-) diff --git a/src/dev-app/autocomplete/autocomplete-demo.ts b/src/dev-app/autocomplete/autocomplete-demo.ts index cdcca4046f53..df610c563088 100644 --- a/src/dev-app/autocomplete/autocomplete-demo.ts +++ b/src/dev-app/autocomplete/autocomplete-demo.ts @@ -250,7 +250,7 @@ export class AutocompleteDemo { changeDetection: ChangeDetectionStrategy.OnPush, }) export class AutocompleteDemoExampleDialog { - constructor(public dialogRef: MatDialogRef) {} + dialogRef = inject>(MatDialogRef); currentSize = ''; sizes = ['S', 'M', 'L']; diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts index 0bcf2ca7cd14..91494fbf05a7 100644 --- a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts +++ b/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; - 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(); diff --git a/src/dev-app/cdk-dialog/dialog-demo.ts b/src/dev-app/cdk-dialog/dialog-demo.ts index d680a34e1358..39e12246ac2d 100644 --- a/src/dev-app/cdk-dialog/dialog-demo.ts +++ b/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 | 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(JazzDialog, this.config); @@ -114,12 +113,10 @@ export class DialogDemo { changeDetection: ChangeDetectionStrategy.OnPush, }) export class JazzDialog { - private _dimensionToggle = false; + dialogRef = inject>(DialogRef); + data = inject(DIALOG_DATA); - constructor( - public dialogRef: DialogRef, - @Inject(DIALOG_DATA) public data: any, - ) {} + private _dimensionToggle = false; togglePosition(): void { this._dimensionToggle = !this._dimensionToggle; diff --git a/src/dev-app/clipboard/clipboard-demo.ts b/src/dev-app/clipboard/clipboard-demo.ts index 96d0032eb695..f879972e66fd 100644 --- a/src/dev-app/clipboard/clipboard-demo.ts +++ b/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); } diff --git a/src/dev-app/connected-overlay/connected-overlay-demo.ts b/src/dev-app/connected-overlay/connected-overlay-demo.ts index bb067436e9a1..d43e4a2b5590 100644 --- a/src/dev-app/connected-overlay/connected-overlay-demo.ts +++ b/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; @@ -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() diff --git a/src/dev-app/datepicker/datepicker-demo.ts b/src/dev-app/datepicker/datepicker-demo.ts index a721fe34ae47..c086e7d2935c 100644 --- a/src/dev-app/datepicker/datepicker-demo.ts +++ b/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 implements MatDateRangeSelectionStrategy { - constructor(private _dateAdapter: DateAdapter) {} + private _dateAdapter = inject>(DateAdapter); selectionFinished(date: D, currentRange: DateRange) { let {start, end} = currentRange; @@ -108,14 +107,16 @@ export class CustomRangeStrategy {} imports: [MatIconModule, MatButtonModule], }) export class CustomHeader implements OnDestroy { + private _calendar = inject>(MatCalendar); + private _dateAdapter = inject>(DateAdapter); + private _dateFormats = inject(MAT_DATE_FORMATS); + private readonly _destroyed = new Subject(); - constructor( - private _calendar: MatCalendar, - private _dateAdapter: DateAdapter, - @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 implements OnDestroy { changeDetection: ChangeDetectionStrategy.OnPush, }) export class CustomHeaderNgContent { + private _dateAdapter = inject>(DateAdapter); + @ViewChild(MatCalendarHeader) header: MatCalendarHeader; - constructor(@Optional() private _dateAdapter: DateAdapter) {} - todayClicked() { let calendar = this.header.calendar; diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts index 6705133ef3ad..3c2168690c86 100644 --- a/src/dev-app/dev-app/dev-app-layout.ts +++ b/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); + 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, - 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)); diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts index 3a41273b8588..c0eb8c36d903 100644 --- a/src/dev-app/dialog/dialog-demo.ts +++ b/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 | 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); + data = inject(MAT_DIALOG_DATA); - constructor( - public dialogRef: MatDialogRef, - @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'}); } diff --git a/src/dev-app/drag-drop/drag-drop-demo.ts b/src/dev-app/drag-drop/drag-drop-demo.ts index c75167a70ec5..a4a0b456498f 100644 --- a/src/dev-app/drag-drop/drag-drop-demo.ts +++ b/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( diff --git a/src/dev-app/example/example.ts b/src/dev-app/example/example.ts index 91d4b9b18889..832e08bfbb95 100644 --- a/src/dev-app/example/example.ts +++ b/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; diff --git a/src/dev-app/focus-origin/focus-origin-demo.ts b/src/dev-app/focus-origin/focus-origin-demo.ts index 5149fdf77bd2..d5e8d91ea7e3 100644 --- a/src/dev-app/focus-origin/focus-origin-demo.ts +++ b/src/dev-app/focus-origin/focus-origin-demo.ts @@ -6,8 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {A11yModule, FocusMonitor} from '@angular/cdk/a11y'; -import {ChangeDetectionStrategy, Component} from '@angular/core'; @Component({ selector: 'focus-origin-demo', @@ -18,5 +18,5 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FocusOriginDemo { - constructor(public fom: FocusMonitor) {} + fom = inject(FocusMonitor); } diff --git a/src/dev-app/focus-trap/focus-trap-demo.ts b/src/dev-app/focus-trap/focus-trap-demo.ts index 9bd1c6c2f99c..c2415d890d8f 100644 --- a/src/dev-app/focus-trap/focus-trap-demo.ts +++ b/src/dev-app/focus-trap/focus-trap-demo.ts @@ -58,6 +58,8 @@ export class FocusTrapShadowDomDemo {} changeDetection: ChangeDetectionStrategy.OnPush, }) export class FocusTrapDemo implements AfterViewInit { + dialog = inject(MatDialog); + @ViewChild('newElements') private _newElements: ElementRef; @@ -68,8 +70,6 @@ export class FocusTrapDemo implements AfterViewInit { readonly cdr = inject(ChangeDetectorRef); - constructor(public dialog: MatDialog) {} - ngAfterViewInit() { // We want all the traps to be disabled by default, but doing so while using the value in // the view will result in "changed after checked" errors so we defer it to the next tick. @@ -108,8 +108,9 @@ let dialogCount = 0; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FocusTrapDialogDemo { + dialog = inject(MatDialog); + id = dialogCount++; - constructor(public dialog: MatDialog) {} openAnotherDialog() { this.dialog.open(FocusTrapDialogDemo); diff --git a/src/dev-app/google-map/google-map-demo.ts b/src/dev-app/google-map/google-map-demo.ts index 7f34b10a839f..2b4dc4f17b2a 100644 --- a/src/dev-app/google-map/google-map-demo.ts +++ b/src/dev-app/google-map/google-map-demo.ts @@ -91,6 +91,8 @@ let apiLoadingPromise: Promise | null = null; changeDetection: ChangeDetectionStrategy.OnPush, }) export class GoogleMapDemo { + private readonly _mapDirectionsService = inject(MapDirectionsService); + @ViewChild(MapPolyline) polyline: MapPolyline; @ViewChild(MapPolygon) polygon: MapPolygon; @ViewChild(MapRectangle) rectangle: MapRectangle; @@ -167,7 +169,7 @@ export class GoogleMapDemo { directionsResult?: google.maps.DirectionsResult; - constructor(private readonly _mapDirectionsService: MapDirectionsService) { + constructor() { this._loadApi(); } diff --git a/src/dev-app/icon/icon-demo.ts b/src/dev-app/icon/icon-demo.ts index 50793477f428..37fd96ec33c5 100644 --- a/src/dev-app/icon/icon-demo.ts +++ b/src/dev-app/icon/icon-demo.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {ChangeDetectionStrategy, Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {MatIconModule, MatIconRegistry} from '@angular/material/icon'; import {DomSanitizer} from '@angular/platform-browser'; @@ -19,7 +19,10 @@ import {DomSanitizer} from '@angular/platform-browser'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class IconDemo { - constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) { + constructor() { + const iconRegistry = inject(MatIconRegistry); + const sanitizer = inject(DomSanitizer); + iconRegistry .addSvgIcon( 'thumb-up', diff --git a/src/dev-app/input-modality/input-modality-detector-demo.ts b/src/dev-app/input-modality/input-modality-detector-demo.ts index e4d3e21cd367..fa791f919b8a 100644 --- a/src/dev-app/input-modality/input-modality-detector-demo.ts +++ b/src/dev-app/input-modality/input-modality-detector-demo.ts @@ -45,7 +45,10 @@ export class InputModalityDetectorDemo implements OnDestroy { _destroyed = new Subject(); readonly cdr = inject(ChangeDetectorRef); - constructor(inputModalityDetector: InputModalityDetector, ngZone: NgZone) { + constructor() { + const inputModalityDetector = inject(InputModalityDetector); + const ngZone = inject(NgZone); + inputModalityDetector.modalityChanged.pipe(takeUntil(this._destroyed)).subscribe(modality => ngZone.run(() => { this._modality = modality; diff --git a/src/dev-app/live-announcer/live-announcer-demo.ts b/src/dev-app/live-announcer/live-announcer-demo.ts index 9f0bc40b3ed2..7372bc272be4 100644 --- a/src/dev-app/live-announcer/live-announcer-demo.ts +++ b/src/dev-app/live-announcer/live-announcer-demo.ts @@ -7,7 +7,7 @@ */ import {A11yModule, LiveAnnouncer} from '@angular/cdk/a11y'; -import {ChangeDetectionStrategy, Component, TemplateRef, ViewChild} from '@angular/core'; +import {ChangeDetectionStrategy, Component, TemplateRef, ViewChild, inject} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; import {MatDialog} from '@angular/material/dialog'; @@ -19,10 +19,8 @@ import {MatDialog} from '@angular/material/dialog'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class LiveAnnouncerDemo { - constructor( - private _liveAnnouncer: LiveAnnouncer, - public dialog: MatDialog, - ) {} + private _liveAnnouncer = inject(LiveAnnouncer); + dialog = inject(MatDialog); announceText(message: string) { this._liveAnnouncer.announce(message); diff --git a/src/dev-app/platform/platform-demo.ts b/src/dev-app/platform/platform-demo.ts index 0bb1f68d8c4b..62e5ca35cc69 100644 --- a/src/dev-app/platform/platform-demo.ts +++ b/src/dev-app/platform/platform-demo.ts @@ -6,9 +6,9 @@ * found in the LICENSE file at https://angular.io/license */ +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {Platform, getSupportedInputTypes} from '@angular/cdk/platform'; import {CommonModule} from '@angular/common'; -import {ChangeDetectionStrategy, Component} from '@angular/core'; @Component({ selector: 'platform-demo', @@ -18,7 +18,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class PlatformDemo { - supportedInputTypes = getSupportedInputTypes(); + platform = inject(Platform); - constructor(public platform: Platform) {} + supportedInputTypes = getSupportedInputTypes(); } diff --git a/src/dev-app/screen-type/screen-type-demo.ts b/src/dev-app/screen-type/screen-type-demo.ts index 13af1679de62..75919d2bbdb1 100644 --- a/src/dev-app/screen-type/screen-type-demo.ts +++ b/src/dev-app/screen-type/screen-type-demo.ts @@ -6,9 +6,9 @@ * found in the LICENSE file at https://angular.io/license */ +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {BreakpointObserver, BreakpointState, Breakpoints, LayoutModule} from '@angular/cdk/layout'; import {CommonModule} from '@angular/common'; -import {ChangeDetectionStrategy, Component} from '@angular/core'; import {MatGridListModule} from '@angular/material/grid-list'; import {MatIconModule} from '@angular/material/icon'; import {Observable} from 'rxjs'; @@ -28,7 +28,9 @@ export class ScreenTypeDemo { isPortrait: Observable; isLandscape: Observable; - constructor(breakpointObserver: BreakpointObserver) { + constructor() { + const breakpointObserver = inject(BreakpointObserver); + this.isHandset = breakpointObserver.observe([ Breakpoints.HandsetLandscape, Breakpoints.HandsetPortrait, diff --git a/src/dev-app/slider/slider-demo.ts b/src/dev-app/slider/slider-demo.ts index 5ab46aa6fed9..7f9a26554448 100644 --- a/src/dev-app/slider/slider-demo.ts +++ b/src/dev-app/slider/slider-demo.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {ChangeDetectionStrategy, Component, Inject} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; @@ -21,12 +21,6 @@ import { import {MatSliderModule} from '@angular/material/slider'; import {MatTabsModule} from '@angular/material/tabs'; -interface DialogData { - color: ThemePalette; - discrete: boolean; - showTickMarks: boolean; -} - @Component({ selector: 'slider-demo', templateUrl: 'slider-demo.html', @@ -44,6 +38,8 @@ interface DialogData { changeDetection: ChangeDetectionStrategy.OnPush, }) export class SliderDemo { + dialog = inject(MatDialog); + discrete = true; showTickMarks = true; colorModel: ThemePalette = 'primary'; @@ -64,8 +60,6 @@ export class SliderDemo { control = new FormControl('0'); - constructor(public dialog: MatDialog) {} - updateValue(input: EventTarget | null): void { if (!input) { return; @@ -139,5 +133,5 @@ export class SliderDemo { changeDetection: ChangeDetectionStrategy.OnPush, }) export class SliderDialogDemo { - constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {} + data = inject(MAT_DIALOG_DATA); } diff --git a/src/dev-app/snack-bar/snack-bar-demo.ts b/src/dev-app/snack-bar/snack-bar-demo.ts index 51b78c5d320c..d32fe8c7c434 100644 --- a/src/dev-app/snack-bar/snack-bar-demo.ts +++ b/src/dev-app/snack-bar/snack-bar-demo.ts @@ -14,6 +14,7 @@ import { TemplateRef, ViewChild, ViewEncapsulation, + inject, } from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; @@ -44,6 +45,9 @@ import { changeDetection: ChangeDetectionStrategy.OnPush, }) export class SnackBarDemo { + snackBar = inject(MatSnackBar); + private _dir = inject(Directionality); + @ViewChild('template') template: TemplateRef; message = 'Snack Bar opened.'; actionButtonLabel = 'Retry'; @@ -54,11 +58,6 @@ export class SnackBarDemo { horizontalPosition: MatSnackBarHorizontalPosition = 'center'; verticalPosition: MatSnackBarVerticalPosition = 'bottom'; - constructor( - public snackBar: MatSnackBar, - private _dir: Directionality, - ) {} - open() { const config = this._createConfig(); this.snackBar.open(this.message, this.action ? this.actionButtonLabel : undefined, config); diff --git a/src/dev-app/youtube-player/youtube-player-demo.ts b/src/dev-app/youtube-player/youtube-player-demo.ts index 22318f2241fe..fbb78e0cafb3 100644 --- a/src/dev-app/youtube-player/youtube-player-demo.ts +++ b/src/dev-app/youtube-player/youtube-player-demo.ts @@ -14,6 +14,7 @@ import { ElementRef, OnDestroy, ViewChild, + inject, } from '@angular/core'; import {FormsModule} from '@angular/forms'; import {MatCheckboxModule} from '@angular/material/checkbox'; @@ -87,6 +88,7 @@ export class YouTubePlayerDemo implements AfterViewInit, OnDestroy { private _selectedVideo?: Video; private _playerVars?: YT.PlayerVars; private _selectedVideoId?: string; + private _changeDetectorRef = inject(ChangeDetectorRef); videos = VIDEOS; videoWidth: number | undefined; @@ -95,7 +97,7 @@ export class YouTubePlayerDemo implements AfterViewInit, OnDestroy { disablePlaceholder = false; placeholderQuality: PlaceholderImageQuality; - constructor(private _changeDetectorRef: ChangeDetectorRef) { + constructor() { this.selectedVideo = VIDEOS[0]; } diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index fa94df394b3c..ac0fefc5c8b7 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -210,6 +210,10 @@ export class TestEntryComponent {} ], }) export class KitchenSink { + private _snackBar = inject(MatSnackBar); + private _dialog = inject(MatDialog); + private _bottomSheet = inject(MatBottomSheet); + /** List of columns for the CDK and Material table. */ tableColumns = ['position', 'name', 'weight', 'symbol']; @@ -222,14 +226,11 @@ export class KitchenSink { /** Whether the kitchen sink is running as a part of an automated test or for local debugging. */ isAutomated: boolean; - constructor( - private _snackBar: MatSnackBar, - private _dialog: MatDialog, - viewportRuler: ViewportRuler, - focusMonitor: FocusMonitor, - elementRef: ElementRef, - private _bottomSheet: MatBottomSheet, - ) { + constructor() { + const viewportRuler = inject(ViewportRuler); + const focusMonitor = inject(FocusMonitor); + const elementRef = inject>(ElementRef); + this.isAutomated = inject(AUTOMATED_KITCHEN_SINK, {optional: true}) ?? true; focusMonitor.focusVia(elementRef, 'program');