Mastering Angular 11’s MatDialog Fundamentals: A Comprehensive Guide

While many Angular Material elements are straightforward, the MatDialog can prove to be the most challenging of them all? On the same occasion, this one likely stands out as the most adaptable among them. One significant advantage is that it’s not an element-based service that can easily be leveraged to launch Material Design-styled and animated modal dialogues. In this tutorial, we’ll replace the conventional JavaScript confirm dialog used in our previous tutorial with a MatDialog.

The existing codebase appears to require an enhancement in its Material Design Dialog (MatDialog) integration within a Materials module file.

We strategically placed all Angular Material imports within this file. Let’s update our listing by incorporating MatDialog.

import { MatDialogModule } from '@angular/material/dialog'; const materialModules = [    //...",   MatToolbarModule,     MatDialogModule  ];  

Creating the ConfirmDialog Part

What makes MatDialog particularly versatile is its ability to pinpoint specific elements within the dialog’s body through its open() method, allowing for targeted and precise control over the content displayed. It’s advisable to define an element only after considering its potential reuse within your application, rather than rushing into creation like a toddler trying to name something. Because of this purpose, I would suggest including it within the app’s description.

ng g c confirm-dialog  

In the confirmDialog.element.ts file, we will revamp the constructor to receive a reference to the dialog alongside the information destined for it.

import { Component,Inject,ViewEncapsulation } from '@angular/core';  import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';    @Component({    selector: 'app-confirm-dialog',    templateUrl: './confirm-dialog.component.html',    styleUrls: ['./confirm-dialog.component.css'],    encapsulation: ViewEncapsulation.Emulated  })html',    styleUrls: ['./confirm-dialog.component.css'],    // this can 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)     { }  }  

Subsequently, we will append the contents of the dialogue to the confirm-dialog.element.html file.

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

Invoking the MatDialog Service

Within the survey.element.ts file, it is possible to substitute the `canExit()` method with a customised dialogue in lieu of the native JavaScript confirm dialogue. To address these issues effectively.

1. public MyClass(MatDialog dialog) {
   this.dialog = dialog;
   }
2. Add the openUnsavedChangesDialog() technique. Responsible for presenting the dialogue.
3. Confirm changes before closing the application?

Here is the improved text in a different style: The revised code for the survey.element.ts file displays the subsequent updates.

// Imports  import { MatDialog } from '@angular/material/dialog';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',    knowledge:{      dialogTitle:'Unsaved modifications',      dialogMessageLine1:'You have unsaved adjustments.',      dialogMessageLine2:'Are you sure you want to leave the page?',      yesButtonText:'Leave this page',      noButtonText:'Stay on this page'    }  }  

The openUnsavedChangesDialog() Methodology Defined

A lot is happening with this small method, so let’s dissect it carefully.

The dialog reference injected via our constructor provides several strategies, properties, and event hooks for effective utilization, notably including the open method. The function accepts an element to display along with a MatDialogConfig object. This is where we configure the appearance of our dialogues, seamlessly integrating with the data object that fuels the dialog’s content.

When the dialog is finished being closed, the afterClosed() lifecycle hook accepts an observable that’s informed whenever this process concludes. No matter what processing we have to complete once the dialogue is closed. Despite not having to accomplish anything, we still need to align with the value delivered by the dialogue. The action to set this option will be triggered by clicking the two buttons in the footer section of the dialog box.

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

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

Here are the top results of today’s updates to the demo. To access the revised survey, navigate to the Survey webpage and collaborate with the form by updating the existing template. Then, click on the “Home” link.

Conclusion

In this tutorial, we delved into the complexities of using the MatDialog, arguably the most intricate yet versatile component in Angular Material’s arsenal. To enhance the demo, we replaced the traditional JavaScript affirmation dialog used previously with a more modern MatDialog implementation.