Learn to Leverage Angular 11’s MatDialog for Enhanced UI/UX Experience

While some Angular Materials elements may seem complex, the MatDialog undoubtedly stands out as one of the more intricate components to work with. At the same time, it’s arguably the most versatile among them all. One of the primary reasons is that Flutter’s Material library doesn’t inherently provide a straightforward way to integrate material design-styled modal dialog boxes with seamless animations, unlike some other popular mobile app development frameworks. In this tutorial, we’ll transform the conventional JavaScript verification dialogue introduced earlier into a sophisticated MatDialog.

import { MatDialog } from ‘@angular/material/dialog’;

All of our Angular Material imports have been carefully placed within this file. We’re going to add the MatDialog component to our list.

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

Creating the ConfirmDialog Element

What sets MatDialog apart as a flexible solution is its ability to accept an optional target element within the dialog’s body, allowing developers to pinpoint specific locations for opening the modal. Before naming an element, consider creating it as a duplicate of another element that can already be named, but also consider the potential for reusing this dialog elsewhere within the application at some point in time. Because of this, I would suggest highlighting its significance within the application’s description.

ng g c confirm-dialog

In the confirm-dialog.element.ts file, the constructor will be updated to simply accept a reference to the dialog alongside the information that will be moved to it.

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

Subsequently, we will append the content 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’s possible to replace the canExit method with your customised dialog instead of relying on native JavaScript confirm dialogs. To achieve this outcome.

1. public MyComponent(MatDialog dialog) {
   this.dialog = dialog;
   }
2. Add the openUnsavedChangesDialog() technique. It is responsible for presenting the dialogue.
3. Prompt user to save changes before exiting?

Here is the improved text in a different style as a professional editor:

The following is the revised and current supply code for the survey.element.ts file, outlining the relevant modifications.

import { MatDialog } from '@angular/material/dialog'; 
import { ConfirmDialogComponent } from '../confirm-dialog.component';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;
  };

  non-public openUnsavedChangesDialog(): Observable<boolean> {
    const dialogRef = this.dialog.open(ConfirmDialogComponent{
  width: 26.5rem,
  knowledge: {
    dialogTitle: "Unsaved Modifications",
    message1: "You've made unsaved adjustments.",
    message2: "Are you certain you want to leave the webpage?",
    yesButtonLabel: "Leave this Page",
    noButtonLabel: "Stay on this Page"
  }
}

The openUnsavedChangesDialog() Technique Defined

So much activity surrounds this small method, let’s delve into its intricacies.

The dialog reference provided through our constructor offers various strategies, properties, and occasion-based hooks for seamless collaboration, one notable feature being the versatile open() method. It accepts an element and a MatDialogConfig object for display purposes. The location where we define the visual appearance of a dialogue box and pair it with the data structure that fills in the content of this graphical user interface component.

When the dialog is fully closed, the afterClosed() event handler is triggered, passing an observable that signals the completion of the closure process. After the dialog is closed, we are able to perform any necessary processing we need to complete. Although in our scenario we’re not obligated to take any action, we still need to align with the value yielded by the dialogue. The confirmation dialogue will be triggered and updated via the 2 buttons in the footer, controlled by 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 shade="major" [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.

The results of today’s updates to the demo are now available. Navigate to the Survey webpage and collaborate with the form by replacing the existing template, then click on the “Home” link.

Conclusion

In this tutorial, we delve into the complexities of using the MatDialog, arguably the most challenging yet versatile Angular Material component. We replaced the traditional JavaScript verification dialogue in our demo with a MatDialog implementation for enhanced functionality.