Study Angular 11 MatDialog Fundamentals

Amongst the array of Angular Materials components, the complexity surrounding the MatDialog truly sets it apart from the rest. At the same time, this one is likely also the most versatile among them. One of the main advantages is that it’s not just an element or service that can be leveraged to create modal dialogs with seamless Materials Design styling and engaging animations, ultimately enhancing the user experience. In this tutorial, we will replace the standard JavaScript confirm dialog box used in previous tutorials with a more advanced MatDialog.

The original text appears to be a request for assistance with adding a dialog component from a specific library called `MatDialog` to a file that is likely part of a larger project structure. Here’s how I would rephrase it:

“`
Add the ‘MatDialog’ module to my Materials module file.

We had previously placed all necessary Angular Material imports within this file.

Adding MatDialog to the record.

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

Creating the ConfirmDialog Element

What sets MatDialog apart as a highly adaptable tool is its ability to accept an element reference for pinpointing specific content within the modal’s body, enabling users to target precise areas and tailor their interactions accordingly. Before deciding to create an element with a unique identifier, it’s prudent to reconsider and think twice about potential future reusability of this dialog within our application. Here’s a revised version of your statement in a different style:

To effectively showcase this feature, I would recommend integrating it directly into the mobile application’s listing.

ng g c confirm-dialog  

In the confirm-dialog.element.ts file, we’ll revise the constructor to merely accept a reference to the dialog alongside the data intended for transfer.

import { Component, ElementRef, Injector, ViewEncapsulation } from '@angular/core';  import { MatDialogRef, MAT_DIALOG_DATA } from '@@angular/material/dialog';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)     { }  }  

As a next step, we will incorporate the dialogue’s content into 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 colour="main" [mat-dialog-close]="true">{{knowledge.yesButtonText}}</button>  </div>  

Invoking the MatDialog Service

In the `survey.element.ts` file, you have the ability to override the `canExit()` method with your custom dialogue instead of using the native JavaScript alert dialog. To resolve these three challenges.

1. class MyComponent { public MyComponent(MatDialog dialog) { this.dialog = dialog; } private MatDialog dialog; }
2. Add the openUnsavedChangesDialog() methodology. It is accountable for presenting the dialogue.
3. The application checks whether there are any unsaved changes before closing. If there are, an openUnsavedChangesDialog is invoked to prompt the user to save or discard them.

Here are the related updates:

import { MatDialog } from '@angular/material/dialog';dialog.element";    // SatisfactionRatings enum    @Element({    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', dialogMessage1: 'You will have unsaved changes.', dialogMessage2: 'Are you sure you want to leave the page?', yesButton: 'Leave this Page', noButton: 'Stay on this Page'}}; return dialogRef.afterClosed();  

The openUnsavedChangesDialog() Technique Defined

Let’s break down this methodology to clarify what’s happening.

The dialog reference injected via the constructor provides numerous strategies, properties, and event hooks for utilizing it effectively, one of which being the open method. The function accepts an element and a MatDialogConfig object. This is where we define the appearance of the dialog’s layout and associate it with the data object that drives the content of the dialog component.

The `afterClosed()` event hook receives an observable value that notifies when the dialog has been fully closed. Regardless of whether the dialogue is closed, we will complete all necessary post-processing tasks. Although we don’t need to perform a specific task in this instance, it’s essential that we align ourselves with the value generated through the conversation. The settings for this dialog will be updated when either of the two buttons in the footer is clicked, utilizing the specific `[mat-dialog-close]` attribute.

<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 colour="main" [mat-dialog-close]="true">{{knowledge.yesButtonText}}</button>  </div>  

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

Here are the latest results of today’s updates to the demo. To complete the process, access the Survey webpage, collaborate with the template by replacing the existing model, and then select the “Home” link.

Conclusion

In this tutorial, we delve into the complexities of utilizing the MatDialog, arguably the most intricate yet adaptable component within the Angular Materials arsenal. By replacing the conventional JavaScript affirmation dialogue used in our demo with a MatDialog, we achieved this outcome.