From e9e3fc4ab8757a6bc8a11a2dbeec807284019868 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Wed, 12 Jun 2024 12:51:40 -0700 Subject: [PATCH] docs(material/dialog): Update dialog examples --- .../dialog-animations-example.ts | 14 ++++--- .../dialog-content/dialog-content-example.ts | 8 ++-- .../dialog-elements-example.ts | 8 ++-- .../dialog-from-menu-example.ts | 14 ++++--- .../dialog-harness/dialog-harness-example.ts | 9 +++-- .../dialog-overview-example-dialog.html | 4 +- .../dialog-overview-example.html | 8 ++-- .../dialog-overview-example.ts | 37 ++++++++++--------- 8 files changed, 57 insertions(+), 45 deletions(-) diff --git a/src/components-examples/material/dialog/dialog-animations/dialog-animations-example.ts b/src/components-examples/material/dialog/dialog-animations/dialog-animations-example.ts index 3e98572dc312..eff78b4dd888 100644 --- a/src/components-examples/material/dialog/dialog-animations/dialog-animations-example.ts +++ b/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) {} + readonly dialogRef = inject(MatDialogRef); } diff --git a/src/components-examples/material/dialog/dialog-content/dialog-content-example.ts b/src/components-examples/material/dialog/dialog-content/dialog-content-example.ts index 953ecddeefb2..fc01911151f2 100644 --- a/src/components-examples/material/dialog/dialog-content/dialog-content-example.ts +++ b/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 {} diff --git a/src/components-examples/material/dialog/dialog-elements/dialog-elements-example.ts b/src/components-examples/material/dialog/dialog-elements/dialog-elements-example.ts index 9bffc07754f0..db028d4ece0b 100644 --- a/src/components-examples/material/dialog/dialog-elements/dialog-elements-example.ts +++ b/src/components-examples/material/dialog/dialog-elements/dialog-elements-example.ts @@ -1,4 +1,5 @@ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; +import {MatButtonModule} from '@angular/material/button'; import { MatDialog, MatDialogActions, @@ -6,7 +7,6 @@ import { 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 {} diff --git a/src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example.ts b/src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example.ts index ec26842ee4b4..451c42e663b2 100644 --- a/src/components-examples/material/dialog/dialog-from-menu/dialog-from-menu-example.ts +++ b/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,11 +15,12 @@ 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 @@ -27,7 +28,7 @@ export class DialogFromMenuExample { // 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 {} diff --git a/src/components-examples/material/dialog/dialog-harness/dialog-harness-example.ts b/src/components-examples/material/dialog/dialog-harness/dialog-harness-example.ts index 59b73d324af9..ea186b8c1c15 100644 --- a/src/components-examples/material/dialog/dialog-harness/dialog-harness-example.ts +++ b/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; + 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); } } diff --git a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example-dialog.html b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example-dialog.html index 212816310692..725de76c635e 100644 --- a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example-dialog.html +++ b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example-dialog.html @@ -3,10 +3,10 @@

Hi {{data.name}}

What's your favorite animal?

Favorite Animal - + - + diff --git a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html index c3f033499dad..210a36c9d466 100644 --- a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html +++ b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html @@ -2,13 +2,15 @@
  • What's your name? - +
    • - @if (animal) { -
  • You chose: {{animal}}
    • + @if (animal()) { +
  • + You chose: {{animal()}} +
    • } diff --git a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.ts b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.ts index 93812eb3f4eb..41449e632951 100644 --- a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.ts +++ b/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, - @Inject(MAT_DIALOG_DATA) public data: DialogData, - ) {} + readonly dialogRef = inject(MatDialogRef); + readonly data = inject(MAT_DIALOG_DATA); + readonly animal = model(this.data.animal); onNoClick(): void { this.dialogRef.close();