Aprenda Angular 11 MatDialog Fundamentals

De todos os componentes do Angular Materials, o MatDialog pode ser o mais complexo. Ao mesmo tempo, provavelmente também é o mais versátil do grupo. Parte do motivo é que ele não é um componente, mas sim um serviço que pode ser utilizado para abrir diálogos modais com estilo e animações do Materials Design. Neste tutorial, substituiremos o diálogo de confirmação JavaScript padrão que implementamos no Prevenção de perda de dados em aplicativos angulares usando um CanDeactivate Route Guard tutorial com um MatDialog:

Caixa de diálogo de confirmação do JavaScript

Angular Confirmar Diálogo

Adicionando MatDialog ao arquivo do módulo de materials

Lembre-se de que colocamos todas as nossas importações de materiais angulares no módulos compartilhados srcappsmaterialmaterial.modulo.ts arquivo. Agora adicionaremos MatDialog à lista:

import {MatDialogModule} from '@angular/materials/dialog';

const materialModules = (
  //...
  MatToolbarModule,
  MatDialogModule
);

Criando o componente ConfirmDialog

Parte do que torna o MatDialog tão versátil é que seu método open() aceita um componente para mostrar no corpo do diálogo. Você pode ficar tentado a criar o componente como um filho daquele que o chamará, mas pode ser sensato pensar duas vezes antes de fazer isso, pois podemos gostar de reutilizar o mesmo diálogo em outros lugares dentro do nosso aplicativo no futuro. Por esse motivo, eu recomendaria gerá-lo dentro do diretório do aplicativo:

ng g c confirm-dialog

No arquivo confirm-dialog.element.ts, modificaremos o construtor para aceitar uma referência ao diálogo, bem como os dados que passaremos a ele:

import { Element, Inject, ViewEncapsulation } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/materials/dialog';

@Element({
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.element.html',
  styleUrls: ('./confirm-dialog.element.css'),
  // it will permit us to override the mat-dialog-container CSS class
  encapsulation: ViewEncapsulation.None
})
export class ConfirmDialogComponent {

  constructor(
    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public knowledge: any) 
  { }
}

Em seguida, adicionaremos o conteúdo da caixa de diálogo ao arquivo confirm-dialog.element.html:

  
{{knowledge.dialogMessageLine1}}

  {{knowledge.dialogMessageLine2}}p>

Invocando o serviço MatDialog

De volta ao arquivo survey.element.ts, estamos prontos para atualizar o método canExit() para apresentar nosso diálogo personalizado em vez do diálogo de confirmação nativo do JavaScript. Há três coisas que precisamos fazer para que isso aconteça:

1. Adicione um construtor que aceite uma referência MatDialog.
2. Adicione o método openUnsavedChangesDialog(). Ele é responsável por mostrar o diálogo.
3. Invoque o método openUnsavedChangesDialog() de canExit().

Aqui está o código-fonte atualizado para o arquivo survey.element.ts que mostra as alterações relevantes:

// imports
import { MatDialog } from "@angular/materials/dialog";
import { ConfirmDialogComponent } from "../confirm-dialog/confirm-dialog.element";

// SatisfactionRatings enum

@Element({
  selector: "app-survey",
  templateUrl: "./survey.element.html",
  styleUrls: ("./survey.element.css")
})
export class SurveyComponent implements IDeactivateComponent {
  // declarations

  constructor(public dialog: MatDialog) { }

  //strategies...

  public canExit(): boolean | Observable {
    return this.ngFormRef.soiled
      ? this.openUnsavedChangesDialog()
      : true;
  };

  non-public openUnsavedChangesDialog(): Observable {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      width: '26.5rem',
      knowledge: { 
        dialogTitle: 'Unsaved Modifications', 
        dialogMessageLine1: 'You might have unsaved modifications.',
        dialogMessageLine2: 'Are you certain you need to depart the web page?',
        yesButtonText: 'Depart this Web page',
        noButtonText: 'Keep on this Web page'
      }
    });

    return dialogRef.afterClosed();
  }
}

O método openUnsavedChangesDialog() explicado

Há muita coisa acontecendo nesse pequeno método, então vamos destrinchar.

A referência de diálogo que injetamos por meio do construtor fornece vários métodos, propriedades e ganchos de eventos para trabalhar com ela, sendo o mais importante o método open(). Ele aceita o componente para exibir, bem como um objeto MatDialogConfig. É onde definimos a aparência do diálogo e passamos o objeto de dados que preenche o componente de diálogo.

O gancho de evento afterClosed() recebe um observable que é notificado quando o diálogo termina de fechar. Podemos fazer qualquer processamento que precisamos fazer depois que o diálogo é fechado. No nosso caso, não precisamos fazer nada além de passar o valor retornado pelo diálogo. Isso é definido pelos dois botões no rodapé por meio do atributo sure (mat-dialog-close):

Precisamos então adicionar o Observable tipo de retorno para canExit() para acomodar o valor de retorno afterClosed().

Aqui está o resultado remaining das atualizações de hoje para o Prevenção de perda de dados em aplicativos angulares usando um CanDeactivate Route Guard demo. Para testá-lo, navegue até a página Survey, interaja com o formulário para atualizar o modelo subjacente e, em seguida, clique no hyperlink House:

Conclusão

Neste tutorial, aprendemos como usar o MatDialog, o componente Angular Materials mais complexo e, ainda assim, mais versátil. Para fazer isso, substituímos o diálogo de confirmação JavaScript padrão que implementamos no Prevenção de perda de dados em aplicativos angulares usando um CanDeactivate Route Guard demonstração com um MatDialog.