build: fix strict property initialization errors in dev apps

crisbeto · crisbeto · commit a8687f993036 · 2025-12-17T14:53:54.000+02:00
Updates the code to be compatible with strict property initialization.
diff --git a/src/dev-app/autocomplete/autocomplete-demo.ts b/src/dev-app/autocomplete/autocomplete-demo.ts
@@ -77,7 +77,7 @@ export class AutocompleteDemo {
   reactiveDisableStateOption: DisableStateOption = 'none';
   templateDisableStateOption: DisableStateOption = 'none';
 
-  @ViewChild(NgModel) modelDir: NgModel;
+  @ViewChild(NgModel) modelDir!: NgModel;
 
   groupedStates: StateGroup[];
   filteredGroupedStates: StateGroup[];
@@ -207,7 +207,7 @@ export class AutocompleteDemo {
   }
 
   dialog = inject(MatDialog);
-  dialogRef: MatDialogRef<AutocompleteDemoExampleDialog> | null;
+  dialogRef: MatDialogRef<AutocompleteDemoExampleDialog> | null = null;
 
   openDialog() {
     this.dialogRef = this.dialog.open(AutocompleteDemoExampleDialog, {width: '400px'});
diff --git a/src/dev-app/baseline/baseline-demo.ts b/src/dev-app/baseline/baseline-demo.ts
@@ -31,5 +31,5 @@ import {MatToolbarModule} from '@angular/material/toolbar';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BaselineDemo {
-  name: string;
+  name = '';
 }
diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts
@@ -54,7 +54,7 @@ export class BottomSheetDemo {
     ariaLabel: 'Example bottom sheet',
   };
 
-  @ViewChild(TemplateRef) template: TemplateRef<any>;
+  @ViewChild(TemplateRef) template!: TemplateRef<any>;
 
   openComponent() {
     this._bottomSheet.open(ExampleBottomSheet, this.config);
diff --git a/src/dev-app/cdk-dialog/dialog-demo.ts b/src/dev-app/cdk-dialog/dialog-demo.ts
@@ -31,9 +31,9 @@ const defaultDialogConfig = new DialogConfig();
 export class DialogDemo {
   dialog = inject(Dialog);
 
-  dialogRef: DialogRef<string> | null;
-  result: string;
-  actionsAlignment: 'start' | 'center' | 'end';
+  dialogRef: DialogRef<string> | null = null;
+  result = '';
+  actionsAlignment!: 'start' | 'center' | 'end';
   config = {
     disableClose: defaultDialogConfig.disableClose,
     panelClass: 'demo-cdk-dialog',
@@ -51,7 +51,7 @@ export class DialogDemo {
   };
   numTemplateOpens = 0;
 
-  @ViewChild(TemplateRef) template: TemplateRef<any>;
+  @ViewChild(TemplateRef) template!: TemplateRef<any>;
 
   readonly cdr = inject(ChangeDetectorRef);
 
diff --git a/src/dev-app/checkbox/checkbox-demo.ts b/src/dev-app/checkbox/checkbox-demo.ts
@@ -118,11 +118,11 @@ export class CheckboxDemo {
   demoChecked = false;
   demoDisabled = false;
   demoIndeterminate = false;
-  demoLabel: string;
-  demoLabelledBy: string;
-  demoId: string;
-  demoName: string;
-  demoValue: string;
+  demoLabel = '';
+  demoLabelledBy = '';
+  demoId = '';
+  demoName = '';
+  demoValue = '';
   demoColor: ThemePalette = 'primary';
   demoDisableRipple = false;
   demoHideLabel = false;
diff --git a/src/dev-app/connected-overlay/connected-overlay-demo.ts b/src/dev-app/connected-overlay/connected-overlay-demo.ts
@@ -54,8 +54,8 @@ export class ConnectedOverlayDemo {
   viewContainerRef = inject(ViewContainerRef);
   dir = inject(Directionality);
 
-  @ViewChild(CdkOverlayOrigin) _overlayOrigin: CdkOverlayOrigin;
-  @ViewChild('overlay') overlayTemplate: TemplateRef<any>;
+  @ViewChild(CdkOverlayOrigin) _overlayOrigin!: CdkOverlayOrigin;
+  @ViewChild('overlay') overlayTemplate!: TemplateRef<any>;
 
   originX: HorizontalConnectionPos = 'start';
   originY: VerticalConnectionPos = 'bottom';
@@ -69,7 +69,7 @@ export class ConnectedOverlayDemo {
   itemCount = 25;
   itemArray: any[] = [];
   itemText = 'Item with a long name';
-  overlayRef: OverlayRef | null;
+  overlayRef: OverlayRef | null = null;
 
   openWithConfig() {
     const positionStrategy = createFlexibleConnectedPositionStrategy(
diff --git a/src/dev-app/datepicker/datepicker-demo.ts b/src/dev-app/datepicker/datepicker-demo.ts
@@ -158,7 +158,7 @@ export class CustomHeaderNgContent<D> {
   private _dateAdapter = inject<DateAdapter<D>>(DateAdapter);
 
   @ViewChild(MatCalendarHeader)
-  header: MatCalendarHeader<D>;
+  header!: MatCalendarHeader<D>;
 
   todayClicked() {
     let calendar = this.header.calendar;
@@ -189,17 +189,17 @@ export class CustomHeaderNgContent<D> {
   ],
 })
 export class DatepickerDemo {
-  touch: boolean;
-  filterOdd: boolean;
-  yearView: boolean;
-  inputDisabled: boolean;
-  datepickerDisabled: boolean;
-  minDate: Date;
-  maxDate: Date;
-  startAt: Date;
+  touch = false;
+  filterOdd = false;
+  yearView = false;
+  inputDisabled = false;
+  datepickerDisabled = false;
+  minDate!: Date;
+  maxDate!: Date;
+  startAt!: Date;
   date: any;
-  lastDateInput: Date | null;
-  lastDateChange: Date | null;
+  lastDateInput: Date | null = null;
+  lastDateChange: Date | null = null;
   color: ThemePalette;
   showActions = false;
 
diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts
@@ -59,10 +59,10 @@ import {MatSelectModule} from '@angular/material/select';
 export class DialogDemo {
   dialog = inject(MatDialog);
 
-  dialogRef: MatDialogRef<JazzDialog> | null;
-  lastAfterClosedResult: string;
-  lastBeforeCloseResult: string;
-  actionsAlignment: 'start' | 'center' | 'end';
+  dialogRef: MatDialogRef<JazzDialog> | null = null;
+  lastAfterClosedResult = '';
+  lastBeforeCloseResult = '';
+  actionsAlignment!: 'start' | 'center' | 'end';
   config = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
@@ -88,7 +88,7 @@ export class DialogDemo {
   enableLegacyPadding = false;
   isScrollable = false;
 
-  @ViewChild(TemplateRef) template: TemplateRef<any>;
+  @ViewChild(TemplateRef) template!: TemplateRef<any>;
 
   readonly cdr = inject(ChangeDetectorRef);
 
@@ -259,7 +259,7 @@ export class ContentElementDialog {
   dialog = inject(MatDialog);
 
   actionsAlignment?: 'start' | 'center' | 'end';
-  isScrollable: boolean;
+  isScrollable = false;
 
   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
@@ -40,7 +40,7 @@ import {MatCheckbox} from '@angular/material/checkbox';
   ],
 })
 export class DragAndDropDemo {
-  axisLock: 'x' | 'y';
+  axisLock!: 'x' | 'y';
   dragStartDelay = 0;
   todo = ['Go out for Lunch', 'Make a cool app', 'Watch TV', 'Eat a healthy dinner', 'Go to sleep'];
   done = ['Get up', 'Have breakfast', 'Brush teeth', 'Check reddit'];
diff --git a/src/dev-app/example/example-list.ts b/src/dev-app/example/example-list.ts
@@ -60,10 +60,10 @@ import {Example} from './example';
 })
 export class ExampleList {
   /** Type of examples being displayed. */
-  @Input() type: string;
+  @Input() type!: string;
 
   /** IDs of the examples to display. */
-  @Input() ids: string[];
+  @Input() ids!: string[];
 
   @Input()
   get expandAll(): boolean {
@@ -72,7 +72,7 @@ export class ExampleList {
   set expandAll(v: BooleanInput) {
     this._expandAll = coerceBooleanProperty(v);
   }
-  _expandAll: boolean;
+  _expandAll = false;
 
   exampleComponents = EXAMPLE_COMPONENTS;
 
diff --git a/src/dev-app/example/example.ts b/src/dev-app/example/example.ts
@@ -64,7 +64,7 @@ export class Example implements OnInit {
   private _changeDetectorRef = inject(ChangeDetectorRef);
 
   /** ID of the material example to display. */
-  @Input() id: string;
+  @Input() id!: string;
 
   @Input()
   get showLabel(): boolean {
@@ -73,9 +73,9 @@ export class Example implements OnInit {
   set showLabel(v: BooleanInput) {
     this._showLabel = coerceBooleanProperty(v);
   }
-  _showLabel: boolean;
+  _showLabel = false;
 
-  title: string;
+  title!: string;
 
   async ngOnInit() {
     this.title = EXAMPLE_COMPONENTS[this.id].title;
diff --git a/src/dev-app/expansion/expansion-demo.ts b/src/dev-app/expansion/expansion-demo.ts
@@ -40,16 +40,16 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExpansionDemo {
-  @ViewChild(MatAccordion) accordion: MatAccordion;
+  @ViewChild(MatAccordion) accordion!: MatAccordion;
 
   displayMode: MatAccordionDisplayMode = 'default';
   multi = false;
   hideToggle = false;
   disabled = false;
   showPanel3 = true;
   togglePosition: MatAccordionTogglePosition = 'after';
-  expandedHeight: string;
-  collapsedHeight: string;
+  expandedHeight!: string;
+  collapsedHeight!: string;
   events: string[] = [];
 
   addEvent(eventName: string) {
diff --git a/src/dev-app/focus-trap/focus-trap-demo.ts b/src/dev-app/focus-trap/focus-trap-demo.ts
@@ -51,10 +51,10 @@ export class FocusTrapDemo implements AfterViewInit {
   dialog = inject(MatDialog);
 
   @ViewChild('newElements')
-  private _newElements: ElementRef<HTMLElement>;
+  private _newElements!: ElementRef<HTMLElement>;
 
   @ViewChildren(CdkTrapFocus)
-  private _focusTraps: QueryList<CdkTrapFocus>;
+  private _focusTraps!: QueryList<CdkTrapFocus>;
 
   _supportsShadowDom = _supportsShadowDom();
 
diff --git a/src/dev-app/google-map/google-map-demo.ts b/src/dev-app/google-map/google-map-demo.ts
@@ -90,10 +90,10 @@ let apiLoadingPromise: Promise<unknown> | null = null;
 export class GoogleMapDemo {
   private readonly _mapDirectionsService = inject(MapDirectionsService);
 
-  @ViewChild(MapPolyline) polyline: MapPolyline;
-  @ViewChild(MapPolygon) polygon: MapPolygon;
-  @ViewChild(MapRectangle) rectangle: MapRectangle;
-  @ViewChild(MapCircle) circle: MapCircle;
+  @ViewChild(MapPolyline) polyline!: MapPolyline;
+  @ViewChild(MapPolygon) polygon!: MapPolygon;
+  @ViewChild(MapRectangle) rectangle!: MapRectangle;
+  @ViewChild(MapCircle) circle!: MapCircle;
   readonly cdr = inject(ChangeDetectorRef);
 
   center = {lat: 24, lng: 12};
@@ -156,7 +156,7 @@ export class GoogleMapDemo {
   // This is necessary for testing advanced markers. It seems like any value works locally.
   mapId = '123';
 
-  mapTypeId: google.maps.MapTypeId;
+  mapTypeId!: google.maps.MapTypeId;
   mapTypeIds = ['hybrid', 'roadmap', 'satellite', 'terrain'] as google.maps.MapTypeId[];
 
   directionsResult?: google.maps.DirectionsResult;
diff --git a/src/dev-app/input/input-demo.ts b/src/dev-app/input/input-demo.ts
@@ -62,11 +62,11 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA
 export class InputDemo {
   color: ThemePalette = 'primary';
   floatingLabel: FloatLabelType = 'auto';
-  requiredField: boolean;
-  disableTextarea: boolean;
-  hideRequiredMarker: boolean;
+  requiredField = false;
+  disableTextarea = false;
+  hideRequiredMarker = false;
   ctrlDisabled = false;
-  textareaNgModelValue: string;
+  textareaNgModelValue = '';
   textareaAutosizeEnabled = false;
   appearance: MatFormFieldAppearance = 'fill';
   prefixSuffixAppearance: MatFormFieldAppearance = 'fill';
@@ -78,14 +78,14 @@ export class InputDemo {
   hiddenLabel = 'Label';
   hiddenAppearance: MatFormFieldAppearance = 'outline';
 
-  name: string;
-  errorMessageExample1: string;
-  errorMessageExample2: string;
-  errorMessageExample3: string;
-  errorMessageExample4: string;
-  dividerColorExample1: string;
-  dividerColorExample2: string;
-  dividerColorExample3: string;
+  name = '';
+  errorMessageExample1 = '';
+  errorMessageExample2 = '';
+  errorMessageExample3 = '';
+  errorMessageExample4 = '';
+  dividerColorExample1 = '';
+  dividerColorExample2 = '';
+  dividerColorExample3 = '';
   items: {value: number}[] = [{value: 10}, {value: 20}, {value: 30}, {value: 40}, {value: 50}];
   rows = 8;
   formControl = new FormControl('hello', Validators.required);
@@ -95,10 +95,10 @@ export class InputDemo {
   isAutofilled = false;
   customAutofillStyle = true;
 
-  legacyAppearance: string;
-  standardAppearance: string;
-  fillAppearance: string;
-  outlineAppearance: string;
+  legacyAppearance = '';
+  standardAppearance = '';
+  fillAppearance = '';
+  outlineAppearance = '';
   appearances: MatFormFieldAppearance[] = ['fill', 'outline'];
 
   hasLabel$ = new BehaviorSubject(true);
diff --git a/src/dev-app/live-announcer/live-announcer-demo.ts b/src/dev-app/live-announcer/live-announcer-demo.ts
@@ -25,7 +25,8 @@ export class LiveAnnouncerDemo {
     this._liveAnnouncer.announce(message);
   }
 
-  @ViewChild(TemplateRef) template: TemplateRef<any>;
+  @ViewChild(TemplateRef) template!: TemplateRef<any>;
+
   openDialog() {
     this.dialog.open(this.template);
   }
diff --git a/src/dev-app/paginator/paginator-demo.ts b/src/dev-app/paginator/paginator-demo.ts
@@ -45,7 +45,7 @@ export class PaginatorDemo {
   showFirstLastButtons = true;
   disabled = false;
 
-  pageEvent: PageEvent;
+  pageEvent: PageEvent | undefined;
 
   handlePageEvent(e: PageEvent) {
     this.pageEvent = e;
diff --git a/src/dev-app/portal/portal-demo.ts b/src/dev-app/portal/portal-demo.ts
@@ -31,10 +31,10 @@ export class ScienceJoke {}
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PortalDemo {
-  @ViewChildren(CdkPortal) templatePortals: QueryList<Portal<any>>;
-  @ViewChild('domPortalSource') domPortalSource: ElementRef<HTMLElement>;
+  @ViewChildren(CdkPortal) templatePortals!: QueryList<Portal<any>>;
+  @ViewChild('domPortalSource') domPortalSource!: ElementRef<HTMLElement>;
 
-  selectedPortal: Portal<any>;
+  selectedPortal!: Portal<any>;
 
   get programmingJoke() {
     return this.templatePortals.first;
diff --git a/src/dev-app/progress-bar/progress-bar-demo.ts b/src/dev-app/progress-bar/progress-bar-demo.ts
@@ -23,8 +23,8 @@ import {MatProgressBarModule} from '@angular/material/progress-bar';
 export class ProgressBarDemo {
   color: ThemePalette = 'primary';
   determinateProgressValue: number = 30;
-  determinateAnimationEndValue: number;
-  bufferAnimationEndValue: number;
+  determinateAnimationEndValue!: number;
+  bufferAnimationEndValue!: number;
   bufferProgressValue: number = 30;
   bufferBufferValue: number = 40;
 
diff --git a/src/dev-app/ripple/ripple-demo.ts b/src/dev-app/ripple/ripple-demo.ts
@@ -30,13 +30,13 @@ import {MatInputModule} from '@angular/material/input';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RippleDemo {
-  @ViewChild(MatRipple) ripple: MatRipple;
+  @ViewChild(MatRipple) ripple!: MatRipple;
 
   centered = false;
   disabled = false;
   unbounded = false;
   rounded = false;
-  radius: number;
+  radius!: number;
   rippleSpeed = 1;
   rippleColor = '';
 
diff --git a/src/dev-app/screen-type/screen-type-demo.ts b/src/dev-app/screen-type/screen-type-demo.ts
diff --git a/src/dev-app/select/select-demo.ts b/src/dev-app/select/select-demo.ts
diff --git a/src/dev-app/sidenav/sidenav-demo.ts b/src/dev-app/sidenav/sidenav-demo.ts
diff --git a/src/dev-app/snack-bar/snack-bar-demo.ts b/src/dev-app/snack-bar/snack-bar-demo.ts
diff --git a/src/dev-app/tsconfig.json b/src/dev-app/tsconfig.json
diff --git a/src/dev-app/youtube-player/youtube-player-demo.ts b/src/dev-app/youtube-player/youtube-player-demo.ts
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts

Original file line number	Diff line number	Diff line change
`@@ -31,5 +31,5 @@ import {MatToolbarModule} from '@angular/material/toolbar';`
`31`	`31`	`changeDetection: ChangeDetectionStrategy.OnPush,`
`32`	`32`	`})`
`33`	`33`	`export class BaselineDemo {`
`34`		`- name: string;`
	`34`	`+ name = '';`
`35`	`35`	`}`