Add a zoneless toggle to the dev-app (angular#28839)

* ci: extend OnPush & standalone lint to dev-app

* build: fix errors due to missing examples

* test: make dev-app OnPush

* test: add a zoneless toggle to dev-app

Author: mmalerba

.prettierignore

@@ -1,5 +1,6 @@
 # Generated files for infrastructure.
 .yarn/releases/*.cjs
+.prettierrc
 
 # These schematic ng-generate files are template files that cannot be formatted.
 src/material/schematics/ng-generate/*/files/**/*
@@ -10,4 +11,4 @@ src/cdk/schematics/ng-generate/*/files/**/*
 src/cdk/schematics/ng-update/test-cases/**/*_input.ts
 src/cdk/schematics/ng-update/test-cases/**/*_expected_output.ts
 src/material/schematics/ng-update/test-cases/**/*_input.ts
-src/material/schematics/ng-update/test-cases/**/*_expected_output.ts
+src/material/schematics/ng-update/test-cases/**/*_expected_output.ts

.prettierrc

@@ -5,5 +5,12 @@
   "quoteProps": "preserve",
   "bracketSpacing": false,
   "arrowParens": "avoid",
-  "embeddedLanguageFormatting": "off"
-}
+  "embeddedLanguageFormatting": "off",
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]}

src/components-examples/example-module.d.ts

@@ -0,0 +1,20 @@
+interface LiveExample {
+  /** Title of the example. */
+  title: string;
+  /** Name of the example component. */
+  componentName: string;
+  /** Selector to match the component of this example. */
+  selector: string;
+  /** Name of the primary file of this example. */
+  primaryFile: string;
+  /** List of files which are part of the example. */
+  files: string[];
+  /** Path to the directory containing the example. */
+  packagePath: string;
+  /** List of additional components which are part of the example. */
+  additionalComponents: string[];
+  /** Path from which to import the xample. */
+  importPath: string;
+}
+
+export const EXAMPLE_COMPONENTS: {[id: string]: LiveExample};

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

@@ -6,16 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, inject, ViewChild} from '@angular/core';
-import {FormControl, NgModel, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, inject, ViewChild} from '@angular/core';
+import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatInputModule} from '@angular/material/input';
 import {ThemePalette} from '@angular/material/core';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {MatInputModule} from '@angular/material/input';
 
 export interface State {
   code: string;
@@ -45,6 +45,7 @@ type DisableStateOption = 'none' | 'first-middle-last' | 'all';
     MatInputModule,
     ReactiveFormsModule,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AutocompleteDemo {
   stateCtrl = new FormControl();
@@ -246,6 +247,7 @@ export class AutocompleteDemo {
   `,
   standalone: true,
   imports: [CommonModule, FormsModule, MatAutocompleteModule, MatButtonModule, MatInputModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AutocompleteDemoExampleDialog {
   constructor(public dialogRef: MatDialogRef<AutocompleteDemoExampleDialog>) {}

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

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatBadgeModule} from '@angular/material/badge';
 import {MatButtonModule} from '@angular/material/button';
@@ -19,6 +19,7 @@ import {MatIconModule} from '@angular/material/icon';
   styleUrl: 'badge-demo.css',
   standalone: true,
   imports: [CommonModule, FormsModule, MatBadgeModule, MatButtonModule, MatIconModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BadgeDemo {
   visible = true;

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

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatCardModule} from '@angular/material/card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -31,6 +31,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
     MatSelectModule,
     MatToolbarModule,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BaselineDemo {
   name: string;

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

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, TemplateRef, ViewChild} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, TemplateRef, ViewChild} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {
   MatBottomSheet,
@@ -44,6 +44,7 @@ const defaultConfig = new MatBottomSheetConfig();
     MatSelectModule,
     MatListModule,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BottomSheetDemo {
   config: MatBottomSheetConfig = {
@@ -80,6 +81,7 @@ export class BottomSheetDemo {
   `,
   standalone: true,
   imports: [CommonModule, MatListModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExampleBottomSheet {
   constructor(private _bottomSheet: MatBottomSheetRef) {}

src/dev-app/button-toggle/button-toggle-demo.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -19,6 +19,7 @@ import {MatIconModule} from '@angular/material/icon';
   styleUrl: 'button-toggle-demo.css',
   standalone: true,
   imports: [CommonModule, FormsModule, MatButtonToggleModule, MatCheckboxModule, MatIconModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonToggleDemo {
   isVertical = false;

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

@@ -6,21 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {
-  MatButton,
   MatAnchor,
-  MatFabButton,
+  MatButton,
   MatFabAnchor,
-  MatIconButton,
+  MatFabButton,
   MatIconAnchor,
-  MatMiniFabButton,
+  MatIconButton,
   MatMiniFabAnchor,
+  MatMiniFabButton,
 } from '@angular/material/button';
+import {MatCheckbox} from '@angular/material/checkbox';
 import {MatIcon} from '@angular/material/icon';
 import {MatTooltip} from '@angular/material/tooltip';
-import {MatCheckbox} from '@angular/material/checkbox';
 
 @Component({
   selector: 'button-demo',
@@ -41,6 +41,7 @@ import {MatCheckbox} from '@angular/material/checkbox';
     MatCheckbox,
     FormsModule,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonDemo {
   isDisabled = false;

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

@@ -6,10 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ViewEncapsulation} from '@angular/core';
-import {MatCardAppearance, MatCardModule} from '@angular/material/card';
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
+import {MatCardAppearance, MatCardModule} from '@angular/material/card';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 
 @Component({
@@ -19,6 +19,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [MatCardModule, MatButtonModule, MatCheckboxModule, FormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CardDemo {
   appearance: MatCardAppearance = 'raised';

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

@@ -6,8 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Inject, TemplateRef, ViewChild, ViewEncapsulation} from '@angular/core';
-import {DIALOG_DATA, Dialog, DialogConfig, DialogRef, DialogModule} from '@angular/cdk/dialog';
+import {DIALOG_DATA, Dialog, DialogConfig, DialogModule, DialogRef} from '@angular/cdk/dialog';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  TemplateRef,
+  ViewChild,
+  ViewEncapsulation,
+  inject,
+} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 
 const defaultDialogConfig = new DialogConfig();
@@ -19,6 +28,7 @@ const defaultDialogConfig = new DialogConfig();
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [DialogModule, FormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogDemo {
   dialogRef: DialogRef<string> | null;
@@ -43,6 +53,8 @@ export class DialogDemo {
 
   @ViewChild(TemplateRef) template: TemplateRef<any>;
 
+  readonly cdr = inject(ChangeDetectorRef);
+
   constructor(public dialog: Dialog) {}
 
   openJazz() {
@@ -51,12 +63,19 @@ export class DialogDemo {
     this.dialogRef.closed.subscribe(result => {
       this.result = result!;
       this.dialogRef = null;
+      this.cdr.markForCheck();
     });
   }
 
   openTemplate() {
     this.numTemplateOpens++;
-    this.dialog.open(this.template, this.config);
+    this.dialogRef = this.dialog.open(this.template, this.config);
+
+    this.dialogRef.closed.subscribe(result => {
+      this.result = result!;
+      this.dialogRef = null;
+      this.cdr.markForCheck();
+    });
   }
 }
 
@@ -92,6 +111,7 @@ export class DialogDemo {
     }
   `,
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class JazzDialog {
   private _dimensionToggle = false;

src/dev-app/cdk-experimental-combobox/cdk-combobox-demo.ts

@@ -6,13 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
 import {CdkComboboxModule} from '@angular/cdk-experimental/combobox';
 import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
   templateUrl: 'cdk-combobox-demo.html',
   standalone: true,
   imports: [CdkComboboxModule, CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CdkComboboxDemo {}

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

@@ -6,18 +6,18 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
-import {ConnectedPosition} from '@angular/cdk/overlay';
 import {CdkMenuModule} from '@angular/cdk/menu';
+import {ConnectedPosition} from '@angular/cdk/overlay';
 import {CommonModule} from '@angular/common';
 import {
-  CdkMenuStandaloneMenuExample,
-  CdkMenuStandaloneStatefulMenuExample,
-  CdkMenuMenubarExample,
-  CdkMenuInlineExample,
   CdkMenuContextExample,
+  CdkMenuInlineExample,
+  CdkMenuMenubarExample,
   CdkMenuNestedContextExample,
+  CdkMenuStandaloneMenuExample,
+  CdkMenuStandaloneStatefulMenuExample,
 } from '@angular/components-examples/cdk/menu';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
   templateUrl: 'cdk-menu-demo.html',
@@ -33,6 +33,7 @@ import {
     CdkMenuContextExample,
     CdkMenuNestedContextExample,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CdkMenuDemo {
   customPosition = [

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

@@ -6,13 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Directive, ANIMATION_MODULE_TYPE} from '@angular/core';
-import {MatCheckboxModule, MAT_CHECKBOX_DEFAULT_OPTIONS} from '@angular/material/checkbox';
+import {CommonModule} from '@angular/common';
+import {ANIMATION_MODULE_TYPE, ChangeDetectionStrategy, Component, Directive} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxModule} from '@angular/material/checkbox';
 import {MatPseudoCheckboxModule, ThemePalette} from '@angular/material/core';
 import {MatInputModule} from '@angular/material/input';
 import {MatSelectModule} from '@angular/material/select';
-import {CommonModule} from '@angular/common';
 
 export interface Task {
   name: string;
@@ -51,6 +51,7 @@ export class AnimationsNoop {}
   templateUrl: 'nested-checklist.html',
   standalone: true,
   imports: [CommonModule, MatCheckboxModule, FormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatCheckboxDemoNestedChecklist {
   tasks: Task[] = [
@@ -114,6 +115,7 @@ export class MatCheckboxDemoNestedChecklist {
     ClickActionCheck,
     AnimationsNoop,
   ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CheckboxDemo {
   isIndeterminate: boolean = false;