Be taught Angular 11 MatDialog Fundamentals

Of all of the Angular Materials parts, the MatDialog simply will be the most complicated. On the identical time, it’s most likely additionally essentially the most versatile of the bunch. A part of the reason being that it’s not a element a lot as a service that may be utilized to open modal dialogs with Materials Design styling and animations. On this tutorial, we’ll exchange the usual JavaScript affirm dialog that we carried out within the Stopping Knowledge Loss In Angular Functions utilizing a CanDeactivate Route Guard tutorial with a MatDialog:

JavaScript Verify Dialog

Angular Verify Dialog

Including MatDialog to the Materials Module File

Recall that we positioned all of our Angular Materials imports within the srcappsharedmodulesmaterialmaterial.module.ts file. We’ll now add MatDialog to the checklist:

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

const materialModules = [
  //...
  MatToolbarModule,
  MatDialogModule
];

Creating the ConfirmDialog Part

A part of what makes MatDialog so versatile is that its open() methodology accepts a element to indicate within the physique of the dialog. You is perhaps tempted to create the element as a toddler to the one that may name it, however it is perhaps clever to suppose twice earlier than doing in order we could wish to reuse the identical dialog in different places inside out utility sooner or later. For that purpose, I’d advocate producing it throughout the app listing:

ng g c confirm-dialog

Within the confirm-dialog.element.ts file, we are going to modify the constructor to just accept a reference to the dialog in addition to the information that we’ll go to it:

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

@Part({
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.element.html',
  styleUrls: ['./confirm-dialog.component.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 information: any) 
  { }
}

Subsequent, we’ll add the contents of the dialog to the confirm-dialog.element.html file:

<div class="dialog-header accent-background">
  <span class="dialog-header-title">{{information.dialogTitle}}</span>
</div>
<div class="dialog-content">
  <p>{{information.dialogMessageLine1}}<br/>
  {{information.dialogMessageLine2}}</p>
</div>
<div class="dialog-footer">
  <button class="standard-button dialog-button" mat-raised-button [mat-dialog-close]="false" cdkFocusInitial>{{information.noButtonText}}</button>
    
  <button mat-raised-button colour="major" [mat-dialog-close]="true">{{information.yesButtonText}}</button>
</div>

Invoking the MatDialog Service

Again within the survey.element.ts file, we’re able to replace the canExit() methodology to current our customized dialog as a substitute of the native JavaScript affirm dialog. There are three issues we have to do to make that occur:

1. Add a constructor that accepts a MatDialog reference.
2. Add the openUnsavedChangesDialog() methodology. It’s answerable for displaying the dialog.
3. Invoke the openUnsavedChangesDialog() methodology from canExit().

Right here is the up to date supply code for the survey.element.ts file that reveals the related modifications:

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

// SatisfactionRatings enum

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

  constructor(public dialog: MatDialog) { }

  //strategies...

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

  personal openUnsavedChangesDialog(): Observable<boolean> {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      width: '26.5rem',
      information: { 
        dialogTitle: 'Unsaved Adjustments', 
        dialogMessageLine1: 'You've unsaved modifications.',
        dialogMessageLine2: 'Are you certain you need to depart the web page?',
        yesButtonText: 'Go away this Web page',
        noButtonText: 'Keep on this Web page'
      }
    });

    return dialogRef.afterClosed();
  }
}

The openUnsavedChangesDialog() Technique Defined

There’s loads happening on this little methodology, so let’s unpack it.

The dialog reference that we injected by way of the constructor gives quite a few strategies, properties, and occasion hooks for working with it, a very powerful of which being the open() methodology. It accepts the element to show in addition to a MatDialogConfig object. That’s the place we set the dialog’s look and go alongside the information object that populates the dialog element.

The afterClosed() occasion hook receives an observable that’s notified when the dialog is completed closing. We are able to do no matter processing we have to do after the dialog is closed. In our case, we don’t have to do something however go alongside the worth returned by the dialog. That will get set by the 2 buttons within the footer by way of the certain [mat-dialog-close] attribute:

<div class="dialog-footer">
  <button class="standard-button dialog-button" mat-raised-button [mat-dialog-close]="false" cdkFocusInitial>{{information.noButtonText}}</button>
  &nbsp;&nbsp;
  <button mat-raised-button colour="major" [mat-dialog-close]="true">{{information.yesButtonText}}</button>
</div>

We then want so as to add the Observable<boolean> return sort to canExit() to accommodate the afterClosed() return worth.

Right here’s the tip results of at present’s updates to the Stopping Knowledge Loss In Angular Functions utilizing a CanDeactivate Route Guard demo. To check it, navigate to the Survey web page, work together with the shape in order to replace the underlying mannequin, after which click on the House hyperlink:

Conclusion

On this tutorial, we discovered the way to use the MatDialog, essentially the most complicated, and but most versatile Angular Materials element. To do this, we changed the usual JavaScript affirm dialog that we carried out within the Stopping Knowledge Loss In Angular Functions utilizing a CanDeactivate Route Guard demo with a MatDialog.