Skip to content

Commit 97749b1

Browse files
authored
build: switch dev app to inject (#29499)
Changes the dev app to use `inject` instead of constructor-based injection.
1 parent 1c9dcb4 commit 97749b1

File tree

22 files changed

+113
-111
lines changed

22 files changed

+113
-111
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@ export class AutocompleteDemo {
250250
changeDetection: ChangeDetectionStrategy.OnPush,
251251
})
252252
export class AutocompleteDemoExampleDialog {
253-
constructor(public dialogRef: MatDialogRef<AutocompleteDemoExampleDialog>) {}
253+
dialogRef = inject<MatDialogRef<AutocompleteDemoExampleDialog>>(MatDialogRef);
254254

255255
currentSize = '';
256256
sizes = ['S', 'M', 'L'];

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
import {CommonModule} from '@angular/common';
10-
import {ChangeDetectionStrategy, Component, TemplateRef, ViewChild} from '@angular/core';
10+
import {ChangeDetectionStrategy, Component, TemplateRef, ViewChild, inject} from '@angular/core';
1111
import {FormsModule} from '@angular/forms';
1212
import {
1313
MatBottomSheet,
@@ -47,6 +47,8 @@ const defaultConfig = new MatBottomSheetConfig();
4747
changeDetection: ChangeDetectionStrategy.OnPush,
4848
})
4949
export class BottomSheetDemo {
50+
private _bottomSheet = inject(MatBottomSheet);
51+
5052
config: MatBottomSheetConfig = {
5153
hasBackdrop: defaultConfig.hasBackdrop,
5254
disableClose: defaultConfig.disableClose,
@@ -57,8 +59,6 @@ export class BottomSheetDemo {
5759

5860
@ViewChild(TemplateRef) template: TemplateRef<any>;
5961

60-
constructor(private _bottomSheet: MatBottomSheet) {}
61-
6262
openComponent() {
6363
this._bottomSheet.open(ExampleBottomSheet, this.config);
6464
}
@@ -84,7 +84,7 @@ export class BottomSheetDemo {
8484
changeDetection: ChangeDetectionStrategy.OnPush,
8585
})
8686
export class ExampleBottomSheet {
87-
constructor(private _bottomSheet: MatBottomSheetRef) {}
87+
private _bottomSheet = inject(MatBottomSheetRef);
8888

8989
handleClick(event: MouseEvent) {
9090
event.preventDefault();

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
ChangeDetectionStrategy,
1212
ChangeDetectorRef,
1313
Component,
14-
Inject,
1514
TemplateRef,
1615
ViewChild,
1716
ViewEncapsulation,
@@ -31,6 +30,8 @@ const defaultDialogConfig = new DialogConfig();
3130
changeDetection: ChangeDetectionStrategy.OnPush,
3231
})
3332
export class DialogDemo {
33+
dialog = inject(Dialog);
34+
3435
dialogRef: DialogRef<string> | null;
3536
result: string;
3637
actionsAlignment: 'start' | 'center' | 'end';
@@ -55,8 +56,6 @@ export class DialogDemo {
5556

5657
readonly cdr = inject(ChangeDetectorRef);
5758

58-
constructor(public dialog: Dialog) {}
59-
6059
openJazz() {
6160
this.dialogRef = this.dialog.open<string>(JazzDialog, this.config);
6261

@@ -114,12 +113,10 @@ export class DialogDemo {
114113
changeDetection: ChangeDetectionStrategy.OnPush,
115114
})
116115
export class JazzDialog {
117-
private _dimensionToggle = false;
116+
dialogRef = inject<DialogRef<string>>(DialogRef);
117+
data = inject(DIALOG_DATA);
118118

119-
constructor(
120-
public dialogRef: DialogRef<string>,
121-
@Inject(DIALOG_DATA) public data: any,
122-
) {}
119+
private _dimensionToggle = false;
123120

124121
togglePosition(): void {
125122
this._dimensionToggle = !this._dimensionToggle;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
import {Clipboard, ClipboardModule} from '@angular/cdk/clipboard';
10-
import {ChangeDetectionStrategy, Component} from '@angular/core';
10+
import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
1111
import {FormsModule} from '@angular/forms';
1212

1313
@Component({
@@ -19,6 +19,8 @@ import {FormsModule} from '@angular/forms';
1919
changeDetection: ChangeDetectionStrategy.OnPush,
2020
})
2121
export class ClipboardDemo {
22+
private _clipboard = inject(Clipboard);
23+
2224
attempts = 3;
2325

2426
value =
@@ -32,8 +34,6 @@ export class ClipboardDemo {
3234
`Unfortunately, he taught his apprentice everything he knew, then his apprentice ` +
3335
`killed him in his sleep. Ironic. He could save others from death, but not himself.`;
3436

35-
constructor(private _clipboard: Clipboard) {}
36-
3737
copyViaService() {
3838
this._clipboard.copy(this.value);
3939
}

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
ViewChild,
2626
ViewContainerRef,
2727
ViewEncapsulation,
28+
inject,
2829
} from '@angular/core';
2930
import {FormsModule} from '@angular/forms';
3031
import {MatButtonModule} from '@angular/material/button';
@@ -49,6 +50,10 @@ import {MatRadioModule} from '@angular/material/radio';
4950
changeDetection: ChangeDetectionStrategy.OnPush,
5051
})
5152
export class ConnectedOverlayDemo {
53+
overlay = inject(Overlay);
54+
viewContainerRef = inject(ViewContainerRef);
55+
dir = inject(Directionality);
56+
5257
@ViewChild(CdkOverlayOrigin) _overlayOrigin: CdkOverlayOrigin;
5358
@ViewChild('overlay') overlayTemplate: TemplateRef<any>;
5459

@@ -66,12 +71,6 @@ export class ConnectedOverlayDemo {
6671
itemText = 'Item with a long name';
6772
overlayRef: OverlayRef | null;
6873

69-
constructor(
70-
public overlay: Overlay,
71-
public viewContainerRef: ViewContainerRef,
72-
public dir: Directionality,
73-
) {}
74-
7574
openWithConfig() {
7675
const positionStrategy = this.overlay
7776
.position()

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,16 @@ import {
1212
ChangeDetectorRef,
1313
Component,
1414
Directive,
15-
Inject,
1615
Injectable,
1716
OnDestroy,
18-
Optional,
1917
ViewChild,
2018
ViewEncapsulation,
19+
inject,
2120
} from '@angular/core';
2221
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
2322
import {MatButtonModule} from '@angular/material/button';
2423
import {MatCheckboxModule} from '@angular/material/checkbox';
25-
import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats, ThemePalette} from '@angular/material/core';
24+
import {DateAdapter, MAT_DATE_FORMATS, ThemePalette} from '@angular/material/core';
2625
import {
2726
DateRange,
2827
MAT_DATE_RANGE_SELECTION_STRATEGY,
@@ -42,7 +41,7 @@ import {takeUntil} from 'rxjs/operators';
4241
/** Range selection strategy that preserves the current range. */
4342
@Injectable()
4443
export class PreserveRangeStrategy<D> implements MatDateRangeSelectionStrategy<D> {
45-
constructor(private _dateAdapter: DateAdapter<D>) {}
44+
private _dateAdapter = inject<DateAdapter<D>>(DateAdapter<D>);
4645

4746
selectionFinished(date: D, currentRange: DateRange<D>) {
4847
let {start, end} = currentRange;
@@ -108,14 +107,16 @@ export class CustomRangeStrategy {}
108107
imports: [MatIconModule, MatButtonModule],
109108
})
110109
export class CustomHeader<D> implements OnDestroy {
110+
private _calendar = inject<MatCalendar<D>>(MatCalendar);
111+
private _dateAdapter = inject<DateAdapter<D>>(DateAdapter);
112+
private _dateFormats = inject(MAT_DATE_FORMATS);
113+
111114
private readonly _destroyed = new Subject<void>();
112115

113-
constructor(
114-
private _calendar: MatCalendar<D>,
115-
private _dateAdapter: DateAdapter<D>,
116-
@Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,
117-
cdr: ChangeDetectorRef,
118-
) {
116+
constructor() {
117+
const _calendar = this._calendar;
118+
const cdr = inject(ChangeDetectorRef);
119+
119120
_calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => cdr.markForCheck());
120121
}
121122

@@ -157,11 +158,11 @@ export class CustomHeader<D> implements OnDestroy {
157158
changeDetection: ChangeDetectionStrategy.OnPush,
158159
})
159160
export class CustomHeaderNgContent<D> {
161+
private _dateAdapter = inject<DateAdapter<D>>(DateAdapter);
162+
160163
@ViewChild(MatCalendarHeader)
161164
header: MatCalendarHeader<D>;
162165

163-
constructor(@Optional() private _dateAdapter: DateAdapter<D>) {}
164-
165166
todayClicked() {
166167
let calendar = this.header.calendar;
167168

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

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
ChangeDetectorRef,
1414
Component,
1515
ElementRef,
16-
Inject,
1716
NgZone,
1817
ViewEncapsulation,
1918
inject,
@@ -26,9 +25,9 @@ import {MatSidenavModule} from '@angular/material/sidenav';
2625
import {MatToolbarModule} from '@angular/material/toolbar';
2726
import {MatTooltip, MatTooltipModule} from '@angular/material/tooltip';
2827
import {RouterModule} from '@angular/router';
29-
import {DevAppDirectionality} from './dev-app-directionality';
3028
import {getAppState, setAppState} from './dev-app-state';
3129
import {DevAppRippleOptions} from './ripple-options';
30+
import {DevAppDirectionality} from './dev-app-directionality';
3231

3332
/** Root component for the dev-app demos. */
3433
@Component({
@@ -50,6 +49,13 @@ import {DevAppRippleOptions} from './ripple-options';
5049
changeDetection: ChangeDetectionStrategy.OnPush,
5150
})
5251
export class DevAppLayout {
52+
private _element = inject<ElementRef<HTMLElement>>(ElementRef);
53+
private _rippleOptions = inject(DevAppRippleOptions);
54+
private _dir = inject(Directionality) as DevAppDirectionality;
55+
private _changeDetectorRef = inject(ChangeDetectorRef);
56+
private _document = inject(DOCUMENT);
57+
private _iconRegistry = inject(MatIconRegistry);
58+
5359
state = getAppState();
5460
navItems = [
5561
{name: 'Examples', route: '/examples'},
@@ -119,14 +125,7 @@ export class DevAppLayout {
119125

120126
readonly isZoneless = this._ngZone instanceof ɵNoopNgZone;
121127

122-
constructor(
123-
private _element: ElementRef<HTMLElement>,
124-
private _rippleOptions: DevAppRippleOptions,
125-
@Inject(Directionality) private _dir: DevAppDirectionality,
126-
private _changeDetectorRef: ChangeDetectorRef,
127-
@Inject(DOCUMENT) private _document: Document,
128-
private _iconRegistry: MatIconRegistry,
129-
) {
128+
constructor() {
130129
this.toggleTheme(this.state.darkTheme);
131130
this.toggleStrongFocus(this.state.strongFocusEnabled);
132131
this.toggleDensity(Math.max(this._densityScales.indexOf(this.state.density), 0));

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

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
ChangeDetectionStrategy,
1313
ChangeDetectorRef,
1414
Component,
15-
Inject,
1615
TemplateRef,
1716
ViewChild,
1817
ViewEncapsulation,
@@ -57,6 +56,8 @@ import {MatSelectModule} from '@angular/material/select';
5756
changeDetection: ChangeDetectionStrategy.OnPush,
5857
})
5958
export class DialogDemo {
59+
dialog = inject(MatDialog);
60+
6061
dialogRef: MatDialogRef<JazzDialog> | null;
6162
lastAfterClosedResult: string;
6263
lastBeforeCloseResult: string;
@@ -90,10 +91,10 @@ export class DialogDemo {
9091

9192
readonly cdr = inject(ChangeDetectorRef);
9293

93-
constructor(
94-
public dialog: MatDialog,
95-
@Inject(DOCUMENT) doc: any,
96-
) {
94+
constructor() {
95+
const dialog = this.dialog;
96+
const doc = inject(DOCUMENT);
97+
9798
// Possible useful example for the open and closeAll events.
9899
// Adding a class to the body if a dialog opens and
99100
// removing it after all open dialogs are closed
@@ -180,12 +181,10 @@ export class DialogDemo {
180181
changeDetection: ChangeDetectionStrategy.OnPush,
181182
})
182183
export class JazzDialog {
183-
private _dimensionToggle = false;
184+
dialogRef = inject<MatDialogRef<JazzDialog>>(MatDialogRef<JazzDialog>);
185+
data = inject(MAT_DIALOG_DATA);
184186

185-
constructor(
186-
public dialogRef: MatDialogRef<JazzDialog>,
187-
@Inject(MAT_DIALOG_DATA) public data: any,
188-
) {}
187+
private _dimensionToggle = false;
189188

190189
togglePosition(): void {
191190
this._dimensionToggle = !this._dimensionToggle;
@@ -258,11 +257,11 @@ export class JazzDialog {
258257
changeDetection: ChangeDetectionStrategy.OnPush,
259258
})
260259
export class ContentElementDialog {
260+
dialog = inject(MatDialog);
261+
261262
actionsAlignment?: 'start' | 'center' | 'end';
262263
isScrollable: boolean;
263264

264-
constructor(public dialog: MatDialog) {}
265-
266265
showInStackedDialog() {
267266
this.dialog.open(IFrameDialog, {maxWidth: '80vw'});
268267
}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
9+
import {Component, ViewEncapsulation, ChangeDetectionStrategy, inject} from '@angular/core';
1010
import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
1111
import {DomSanitizer} from '@angular/platform-browser';
1212
import {
@@ -54,7 +54,10 @@ export class DragAndDropDemo {
5454
ages = ['Stone age', 'Bronze age', 'Iron age', 'Middle ages'];
5555
preferredAges = ['Modern period', 'Renaissance'];
5656

57-
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
57+
constructor() {
58+
const iconRegistry = inject(MatIconRegistry);
59+
const sanitizer = inject(DomSanitizer);
60+
5861
iconRegistry.addSvgIconLiteral(
5962
'dnd-move',
6063
sanitizer.bypassSecurityTrustHtml(

src/dev-app/example/example.ts

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
10-
import {CommonModule} from '@angular/common';
11-
import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
12-
import {loadExample} from '@angular/components-examples/private';
139
import {
1410
ChangeDetectionStrategy,
1511
ChangeDetectorRef,
@@ -18,7 +14,12 @@ import {
1814
Input,
1915
OnInit,
2016
ViewContainerRef,
17+
inject,
2118
} from '@angular/core';
19+
import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
20+
import {CommonModule} from '@angular/common';
21+
import {EXAMPLE_COMPONENTS} from '@angular/components-examples';
22+
import {loadExample} from '@angular/components-examples/private';
2223

2324
@Component({
2425
selector: 'material-example',
@@ -61,6 +62,10 @@ import {
6162
changeDetection: ChangeDetectionStrategy.OnPush,
6263
})
6364
export class Example implements OnInit {
65+
private _injector = inject(Injector);
66+
private _viewContainerRef = inject(ViewContainerRef);
67+
private _changeDetectorRef = inject(ChangeDetectorRef);
68+
6469
/** ID of the material example to display. */
6570
@Input() id: string;
6671

@@ -75,12 +80,6 @@ export class Example implements OnInit {
7580

7681
title: string;
7782

78-
constructor(
79-
private _injector: Injector,
80-
private _viewContainerRef: ViewContainerRef,
81-
private _changeDetectorRef: ChangeDetectorRef,
82-
) {}
83-
8483
async ngOnInit() {
8584
this.title = EXAMPLE_COMPONENTS[this.id].title;
8685

0 commit comments

Comments
 (0)