Dialog

Based on Material 3 dialog specifications

Writing dialog

          
    <div class="m3 m3-dialog-surface"
      [ngClass]="theme.colorSchemeBasedClassList()">
      <h1 class="m3-dialog--title">Delete item?</h1>
      <p class="m3-dialog--support-text">
        You'll no longer have access to the item
      </p>
      <div class="m3-dialog--actions">
        <button class="m3-button m3-button__text" matDialogClose>
          <span class="m3-button--label">Cancel</span>
        </button>
        <button class="m3-button m3-button__text" (click)="next()">
          <span class="m3-button--label">Next</span>
        </button>
      </div>
    </div>
    
        

          
          export class DeleteDialogComponent {
            public static async launch(dialog: MatDialog): Promise<boolean> {
              const ref = dialog.open(DeleteDialogComponent);
              const response = await firstValueFrom(ref.afterClosed());
              return response === true;
            }

            constructor(public theme: ThemeService) {
            }
          }
          
        

Using dialog

      constructor(private dialog: MatDialog) {
      }

      public async launchDeleteDialog() {
      await DialogComponent.launch(this.dialog);
      }
    

Specify dialog options

Inject the default dialog options at the top-level module. This is done only once.

      
      @NgModule({
        providers: [
          {
            provide: MAT_DIALOG_DEFAULT_OPTIONS,
            useValue: {
              panelClass: "m3-dialog",
              autoFocus: "dialog",
            },
          },
        ],
      })
      export class AppModule {
      }
      
    

Fullscreen

        
          const ref = dialog.open(
            DeleteDialogComponent,
            {
              panelClass: ["m3-dialog", "m3-dialog__fill"],
              autoFocus: "dialog",
            },
          );
        
      

Last modified: 27 February 2024