Angular Material dialog complete guide

In this article explain I am going a explain how to create a dialog in angular project.For this tutorial I am gone use one of the most famous Material UI Angular library. I contain feature packed dialog component which we can use for any project.

This article contain following section

1. How to install plugin and create a simple dialog
2. How to disable dialog close when clicking outside
3. Material dialog useful configurations options
4. How to pass data to the material dialog
5. How to passing data when closing the dialog

How to install the plugin and create a simple dialog

Before creating a modal first you must install the required packages using the following command.

ng add @angular/material 

This will install Angular Material, the Component Dev Kit (CDK) and Angular Animations. Also, it will ask for the theme, global typography and setup browser animation. Make sure to select yes for browser animation. Otherwise, most of the animation in the Material module will not work.

Next, you can add the required material module to the angular module file. In this tutorial, I am using a fresh project and the only module which I have is the app module. You can add this to any module which you are hoping to use the dialog

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

@NgModule({
 
  imports: [
    ....
    MatDialogModule,
  ]
})

Let’s create a component to use as a dialog. Execute the following command and it will create a detail-dialog component under the component folder.

ng g c component/detail-dialog

Open the Html file of the created component and add the following HTML part.

<h1 mat-dialog-title>User Details</h1>
<div mat-dialog-content>
    <p>Name : Shan</p>
</div>
<div mat-dialog-actions>
  <button mat-button mat-dialog-close>Close</button>
</div>

In here you can see mainly 3 attributes.

1. mat-dialog-title – This is used to define the title of the dialog.
2. mat-dialog-content – Inside this div you can specify the content of the dialog
3. mat-dialog-actions – In here you can specify the list of action buttons. This will show at the bottom of the dialog.

Now you need a way to show the dialog when someone triggers an action. Therefore let’s add a button to the main AppComponent.

<button (click)="showDialog()">Show Contact Dialog</button>

Inside the app.component.ts file you need to add the trigger event.

Here,first, we need to inject the MatDialog service from the constructor. MatDialog service contains the open method which accepts dialog component as a first parameter.

import { MatDialog } from '@angular/material/dialog';
import { DetailDialogComponent } from './component/detail-dialog/detail-dialog.component';


export class AppComponent {
  title = 'dialog-app';

  constructor(private matDialog:MatDialog){

  }

  showDialog(){
    this.matDialog.open(DetailDialogComponent)
  }
}

When you click the button now you will be able to see a simple dialog.

How to disable dialog close when clicking outside

Default when user clicks outside of the dialog it gets closed. This behaviour can be changed by setting disableClose to true in the MatDialogConfig.

First, create an object of MatDialogConfig class and set disableClose property to true.

showDialog(){
    const mdConfig = new MatDialogConfig();
    mdConfig.disableClose = true;

    this.matDialog.open(DetailDialogComponent,mdConfig)
  }

Also you can just set those configurations like below.

this.matDialog.open(DetailDialogComponent,{width:"500px",direction: "rtl"})

Other than that you can change the following property by changing the dialog config.

Material dialog useful configurations options

Disable backdrop

mdConfig.hasBackdrop = false;

Set dialog width

mdConfig.width = "500px"

Set the dialog position

mdConfig.position = {top:"0px"}

This will show the dialog in the top of the page. Default it shows in the center. You can also specify the left, right, and bottom values to this.

Set the direction

Default content will be shown from left to right. If you need to change that from right to left you can change this property.

mdConfig.direction = "rtl"

How to pass data to the material dialog

When creating a dialog usually needs a way to pass details to the dialog. Let’s say we are creating a dialog to edit user details. When the user clicks the edit we need to pass those details to the dialog.

To pass data we can use the data property in MatDialogConfig object.

mdConfig.data = {
      name:'Shan',
      <email:"shan@gmail.com>"
}
this.matDialog.open(DetailDialogComponent,mdConfig)

Or we can directly specify the data like below

this.matDialog.open(DetailDialogComponent,{data: {
      name:'Shan',
      <email:"shan@gmail.com>"
 }})

Next we should access those values inside the dialog component. To that, we need to use MAT_DIALOG_DATA injectable. It will give access to the data which is passed previously. Then you can set those values to the userDetails object.

export class DetailDialogComponent implements OnInit {

  public userDetails : {name?:string,email?:string} = {};

  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
    this.userDetails = data
   }

}

Then you can access those values in the template

<h1 mat-dialog-title>User Details</h1>
<div mat-dialog-content>
    <p>Name : {{userDetails.name}}</p>
    <p>Email : {{userDetails.email}}</p>
</div>
<div mat-dialog-actions>
  <!-- <button mat-button mat-dialog-close>Close</button> -->
  <button mat-button (click)="closeDialog()">Close</button>
</div>

How to pass data when closing the dialog

Often we need to pass some values to the main component when the user closes the dialog. This can be easily done through the close method.

First, inject MatDialogRef service through the constructor.

Here you can add a custom closeDialog function to trigger when the user clicks the close button on the dialog.

we can pass data object or value to the close method like below

constructor(@Inject(MAT_DIALOG_DATA) public data: any,private dialogRef:MatDialogRef<DetailDialogComponent>) {
    this.userDetails = data
}

closeDialog(){
      this.dialogRef.close({action:'Yes'});
  }

In the app component we need to create a variable to keep dialog reference. We can subscribe to the afterClosed observable to get the data.

showDialog(){

    const dialogRef = this.matDialog.open(DetailDialogComponent,{data: {
      name:'Shan',
      <email:"shan@gmail.com>"
    }})

    dialogRef.afterClosed().subscribe(result => {
			console.log(`Dialog result: ${JSON.stringify(result)}`);
		});
  }

Conclusion

This article discussed how to install and use material dialog in your angular application. Also, we discussed how to pass data to dialog and pass data to the main component when the user closes the dialog. Other than that we also discussed a few configurations which we can do to customize material dialog