Study Angular 11 MatDialog Fundamentals

Developer.com content material and product suggestions are editorially impartial. We might make cash while you click on on hyperlinks to our companions. Study Extra.

Of all of the Angular Materials elements, the MatDialog simply stands out as the most advanced. On the similar time, it’s most likely additionally probably the most versatile of the bunch. A part of the reason being that it’s not a part a lot as a service that may be utilized to open modal dialogs with Materials Design styling and animations. On this tutorial, we’ll change the usual JavaScript verify dialog that we carried out within the Stopping Knowledge Loss In Angular Purposes utilizing a CanDeactivate Route Guard tutorial with a MatDialog:

JavaScript Affirm Dialog

Angular Affirm 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 Element

A part of what makes MatDialog so versatile is that its open() technique accepts a part to point out within the physique of the dialog. You is likely to be tempted to create the part as a baby to the one that may name it, however it is likely to be smart to suppose twice earlier than doing in order we might wish to reuse the identical dialog in different places inside out utility sooner or later. For that purpose, I might advocate producing it inside the app listing:

ng g c confirm-dialog

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

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

@Element(
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.part.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.part.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="main" [mat-dialog-close]="true">information.yesButtonText</button>
</div>

Invoking the MatDialog Service

Again within the survey.part.ts file, we’re able to replace the canExit() technique to current our customized dialog as a substitute of the native JavaScript verify 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() technique. It’s liable for exhibiting the dialog.
3. Invoke the openUnsavedChangesDialog() technique from canExit().

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

// imports
import  MatDialog  from "@angular/materials/dialog";
import  ConfirmDialogComponent  from "../confirm-dialog/confirm-dialog.part";

// SatisfactionRatings enum

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

  constructor(public dialog: MatDialog)  

  //strategies...

  public canExit(): boolean 

The openUnsavedChangesDialog() Technique Defined

There’s so much happening on this little technique, so let’s unpack it.

The dialog reference that we injected through the constructor offers quite a few strategies, properties, and occasion hooks for working with it, crucial of which being the open() technique. It accepts the part to show in addition to a MatDialogConfig object. That’s the place we set the dialog’s look and cross alongside the information object that populates the dialog part.

The afterClosed() occasion hook receives an observable that’s notified when the dialog is completed closing. We will do no matter processing we have to do after the dialog is closed. In our case, we don’t must do something however cross alongside the worth returned by the dialog. That will get set by the 2 buttons within the footer through the sure [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="main" [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 top results of at the moment’s updates to the Stopping Knowledge Loss In Angular Purposes 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 Residence hyperlink:

Conclusion

On this tutorial, we realized easy methods to use the MatDialog, probably the most advanced, and but most versatile Angular Materials part. To try this, we changed the usual JavaScript verify dialog that we carried out within the Stopping Knowledge Loss In Angular Purposes utilizing a CanDeactivate Route Guard demo with a MatDialog.