docs(material/dialog): Update dialog examples (#29242)

Author: mmalerba

src/components-examples/material/dialog/dialog-animations/dialog-animations-example.ts

@@ -1,13 +1,13 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 import {
   MatDialog,
-  MatDialogRef,
   MatDialogActions,
   MatDialogClose,
-  MatDialogTitle,
   MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
 } from '@angular/material/dialog';
-import {MatButtonModule} from '@angular/material/button';
 
 /**
  * @title Dialog Animations
@@ -18,9 +18,10 @@ import {MatButtonModule} from '@angular/material/button';
   templateUrl: 'dialog-animations-example.html',
   standalone: true,
   imports: [MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogAnimationsExample {
-  constructor(public dialog: MatDialog) {}
+  readonly dialog = inject(MatDialog);
 
   openDialog(enterAnimationDuration: string, exitAnimationDuration: string): void {
     this.dialog.open(DialogAnimationsExampleDialog, {
@@ -36,7 +37,8 @@ export class DialogAnimationsExample {
   templateUrl: 'dialog-animations-example-dialog.html',
   standalone: true,
   imports: [MatButtonModule, MatDialogActions, MatDialogClose, MatDialogTitle, MatDialogContent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogAnimationsExampleDialog {
-  constructor(public dialogRef: MatDialogRef<DialogAnimationsExampleDialog>) {}
+  readonly dialogRef = inject(MatDialogRef<DialogAnimationsExampleDialog>);
 }

src/components-examples/material/dialog/dialog-content/dialog-content-example.ts

@@ -1,6 +1,6 @@
-import {Component} from '@angular/core';
-import {MatDialog, MatDialogModule} from '@angular/material/dialog';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
+import {MatDialog, MatDialogModule} from '@angular/material/dialog';
 
 /**
  * @title Dialog with header, scrollable content and actions
@@ -10,9 +10,10 @@ import {MatButtonModule} from '@angular/material/button';
   templateUrl: 'dialog-content-example.html',
   standalone: true,
   imports: [MatButtonModule, MatDialogModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogContentExample {
-  constructor(public dialog: MatDialog) {}
+  readonly dialog = inject(MatDialog);
 
   openDialog() {
     const dialogRef = this.dialog.open(DialogContentExampleDialog);
@@ -28,5 +29,6 @@ export class DialogContentExample {
   templateUrl: 'dialog-content-example-dialog.html',
   standalone: true,
   imports: [MatDialogModule, MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogContentExampleDialog {}

src/components-examples/material/dialog/dialog-elements/dialog-elements-example.ts

@@ -1,12 +1,12 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 import {
   MatDialog,
   MatDialogActions,
   MatDialogClose,
   MatDialogContent,
   MatDialogTitle,
 } from '@angular/material/dialog';
-import {MatButtonModule} from '@angular/material/button';
 
 /**
  * @title Dialog elements
@@ -16,9 +16,10 @@ import {MatButtonModule} from '@angular/material/button';
   templateUrl: 'dialog-elements-example.html',
   standalone: true,
   imports: [MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogElementsExample {
-  constructor(public dialog: MatDialog) {}
+  readonly dialog = inject(MatDialog);
 
   openDialog() {
     this.dialog.open(DialogElementsExampleDialog);
@@ -30,5 +31,6 @@ export class DialogElementsExample {
   templateUrl: 'dialog-elements-example-dialog.html',
   standalone: true,
   imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogElementsExampleDialog {}

src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example.ts

@@ -1,12 +1,12 @@
-import {Component, ViewChild} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, viewChild} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 import {
   MatDialog,
   MatDialogActions,
   MatDialogClose,
   MatDialogContent,
 } from '@angular/material/dialog';
-import {MatMenuTrigger, MatMenuModule} from '@angular/material/menu';
-import {MatButtonModule} from '@angular/material/button';
+import {MatMenuModule, MatMenuTrigger} from '@angular/material/menu';
 /**
  * @title Dialog launched from a menu
  */
@@ -15,19 +15,20 @@ import {MatButtonModule} from '@angular/material/button';
   templateUrl: 'dialog-from-menu-example.html',
   standalone: true,
   imports: [MatButtonModule, MatMenuModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogFromMenuExample {
-  @ViewChild('menuTrigger') menuTrigger: MatMenuTrigger;
+  readonly menuTrigger = viewChild.required(MatMenuTrigger);
 
-  constructor(public dialog: MatDialog) {}
+  readonly dialog = inject(MatDialog);
 
   openDialog() {
     // #docregion focus-restoration
     const dialogRef = this.dialog.open(DialogFromMenuExampleDialog, {restoreFocus: false});
 
     // Manually restore focus to the menu trigger since the element that
     // opens the dialog won't be in the DOM any more when the dialog closes.
-    dialogRef.afterClosed().subscribe(() => this.menuTrigger.focus());
+    dialogRef.afterClosed().subscribe(() => this.menuTrigger().focus());
     // #enddocregion focus-restoration
   }
 }
@@ -37,5 +38,6 @@ export class DialogFromMenuExample {
   templateUrl: 'dialog-from-menu-example-dialog.html',
   standalone: true,
   imports: [MatDialogContent, MatDialogActions, MatDialogClose, MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogFromMenuExampleDialog {}

src/components-examples/material/dialog/dialog-harness/dialog-harness-example.ts

@@ -1,4 +1,4 @@
-import {Component, TemplateRef, ViewChild} from '@angular/core';
+import {ChangeDetectionStrategy, Component, TemplateRef, inject, viewChild} from '@angular/core';
 import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
 
 /**
@@ -8,13 +8,14 @@ import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
   selector: 'dialog-harness-example',
   templateUrl: 'dialog-harness-example.html',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogHarnessExample {
-  @ViewChild(TemplateRef) dialogTemplate: TemplateRef<any>;
+  readonly dialogTemplate = viewChild.required(TemplateRef);
 
-  constructor(readonly dialog: MatDialog) {}
+  readonly dialog = inject(MatDialog);
 
   open(config?: MatDialogConfig) {
-    return this.dialog.open(this.dialogTemplate, config);
+    return this.dialog.open(this.dialogTemplate(), config);
   }
 }

src/components-examples/material/dialog/dialog-overview/dialog-overview-example-dialog.html

@@ -3,10 +3,10 @@ <h2 mat-dialog-title>Hi {{data.name}}</h2>
   <p>What's your favorite animal?</p>
   <mat-form-field>
     <mat-label>Favorite Animal</mat-label>
-    <input matInput [(ngModel)]="data.animal">
+    <input matInput [(ngModel)]="animal" />
   </mat-form-field>
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-button (click)="onNoClick()">No Thanks</button>
-  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
+  <button mat-button [mat-dialog-close]="animal()" cdkFocusInitial>Ok</button>
 </mat-dialog-actions>

src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html

@@ -2,13 +2,15 @@
   <li>
     <mat-form-field>
       <mat-label>What's your name?</mat-label>
-      <input matInput [(ngModel)]="name">
+      <input matInput [(ngModel)]="name" />
     </mat-form-field>
   </li>
   <li>
     <button mat-raised-button (click)="openDialog()">Pick one</button>
   </li>
-  @if (animal) {
-    <li>You chose: <em>{{animal}}</em></li>
+  @if (animal()) {
+    <li>
+      You chose: <em>{{animal()}}</em>
+    </li>
   }
 </ol>

src/components-examples/material/dialog/dialog-overview/dialog-overview-example.ts

@@ -1,17 +1,17 @@
-import {Component, Inject} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, model, signal} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
 import {
-  MatDialog,
   MAT_DIALOG_DATA,
-  MatDialogRef,
-  MatDialogTitle,
-  MatDialogContent,
+  MatDialog,
   MatDialogActions,
   MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
 } from '@angular/material/dialog';
-import {MatButtonModule} from '@angular/material/button';
-import {FormsModule} from '@angular/forms';
-import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 
 export interface DialogData {
   animal: string;
@@ -26,21 +26,23 @@ export interface DialogData {
   templateUrl: 'dialog-overview-example.html',
   standalone: true,
   imports: [MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogOverviewExample {
-  animal: string;
-  name: string;
-
-  constructor(public dialog: MatDialog) {}
+  readonly animal = signal('');
+  readonly name = model('');
+  readonly dialog = inject(MatDialog);
 
   openDialog(): void {
     const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
-      data: {name: this.name, animal: this.animal},
+      data: {name: this.name(), animal: this.animal()},
     });
 
     dialogRef.afterClosed().subscribe(result => {
       console.log('The dialog was closed');
-      this.animal = result;
+      if (result !== undefined) {
+        this.animal.set(result);
+      }
     });
   }
 }
@@ -61,10 +63,9 @@ export class DialogOverviewExample {
   ],
 })
 export class DialogOverviewExampleDialog {
-  constructor(
-    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
-    @Inject(MAT_DIALOG_DATA) public data: DialogData,
-  ) {}
+  readonly dialogRef = inject(MatDialogRef<DialogOverviewExampleDialog>);
+  readonly data = inject<DialogData>(MAT_DIALOG_DATA);
+  readonly animal = model(this.data.animal);
 
   onNoClick(): void {
     this.dialogRef.close();