Angular Material — Dialog

Create and display a fully interactive angular material dialog. This article will show you in 3 steps how to.

1. Create a dialog, the user should be able to open it, see a message, and be able to close it.
2. Load data into the dialog, when the user opens the dialog, it’ll show with preset data or load remote data to interact with, in the dialog.
3. Return data, allow the user to select an option, and return this to the component which opened the dialog.

For the purpose of the article, I have a component named customerDetail.component.ts which is the component used to show customer information. We would like to give the user the option of changing the customer active status via a dialog. The full template code can be found here.

Creating a dialog

Within the file customerDetails.component.ts we will start with importing the following requirements from angular material.

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

and within the constructor, we will add

constructor() {…, private matDialog: MatDialog}

At the end of the file after the CustomerDetailsComponent we will add another component as such.

@Component({
  selector: ‘app-customer-activate-dialog’,
  templateUrl: ‘./activate-confirm.component.html’,
  styleUrls: [‘./detail.component.scss’]
})
export class ActivateCustomerConfirmComponent {
 constructor(
   private dialog: MatDialogRef<ActivateCustomerConfirmComponent>
 ) {}
}

Give the component selector a name for this component.

Create an HTML file in the same directory as the component. Use this file name as the templateUrl .

Set the stylesUrls to be the same styles the main component is using or you can create your own styles and add this in the stylesUrls .

Get Mo Gold’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Inside the constructor, set the dialog ref using the dialog component name as the type.

In the main component add a method to open the dialog and show the user a message. The user should also be able to close the dialog by either clicking on the close button or pressing esc on the keyboard.

function showDialog(){
 
  this.dialogRef.open(ActivateCustomerConfirmComponent);
}

This method calls the angular material dialog class and calls the open method to which you pass in the class name of the dialog component created at the end of the file.

In the fileactivate-confirm.component.htmlwe can put in the following HTML to use as the dialog template.

<h2 mat-dialog-title>A Dialog</h2>
<mat-dialog-content class=”mat-typography”>
  <p>The dialog works.</p>
</mat-dialog-content>
<mat-dialog-actions align=”end”>
  <button mat-button color=”primary"(click)=”closeDialog()”>
     Close Dialog
  </button>
</mat-dialog-actions>

We start with a dialog title using a <h2>element and add mat-dialog-title so that the styles get applied correctly.

Add a <mat-dialog-content> element, which will have all the dialog content within it. Add an <p> element that will have the message displayed to the user.

Add another material element <mat-dialog-actions> which will have the action buttons for the dialog at the bottom of the dialog.

Within the main HTML file customerDetail.component.html add a button <button mat-button (click)="showDialog()">Open Dialog</button> which when the user clicks it, the dialog will open.

At the moment, if you click this button you should get an error in the console saying that there is no reference to ActivateCustomerConfirmComponent this is because all dialogs need to be declared in the entry components. Open the file named app.module.ts in the src/app directory and add the following import.

import {ActivateCustomerConfirmComponent} from 'customers/detail/customerDetail.component';

Add the dialog to the declarations array and also add the dialog import to the entryComponents array.

When clicking on the button now, the dialog should open and the user should be able to close it by pressing esc on the keyboard. To add functionality so that the dialog closes when the user clicks on the Close Dialog button, within the dialog component add the following function after the constructor.

function closeDialog(){
 
  this.dialogRef.clos()
}

Now after refreshing and opening the dialog, click on the close dialog button and the dialog will close.

The next part of the article is available here

Cheers,

Moshe